fix appendix background

2023-02-23 13:22:36 +01:00 · 2023-02-23 13:22:36 +01:00 · ba72dfa5d5
commit ba72dfa5d5
parent 897b4d318f
301 changed files with 620 additions and 612 deletions
--- a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/all_shapes_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/all_shapes_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/animated/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/animated_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/animated_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/arrowheads/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/arrowheads/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/arrowheads_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/arrowheads_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/basic_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/basic_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/child_to_child_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/child_to_child_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/class/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/class/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/class_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/class_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/connection_label_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/connection_label_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/crows_feet/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/crows_feet/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/crows_feet_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/crows_feet_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/opacity/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/opacity/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/opacity_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/opacity_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/overlay/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/overlay/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/sql_tables_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/sql_tables_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/twitter_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/twitter_dark/sketch.exp.svg
--- a/d2renderers/d2svg/appendix/appendix.go
+++ b/d2renderers/d2svg/appendix/appendix.go
@ -14,6 +14,8 @@ import (
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 	"oss.terrastruct.com/d2/d2renderers/d2svg"
 	"oss.terrastruct.com/d2/d2target"
+	"oss.terrastruct.com/d2/d2themes"
+	"oss.terrastruct.com/d2/lib/color"
 	"oss.terrastruct.com/d2/lib/textmeasure"
 	"oss.terrastruct.com/util-go/go2"
 )
@ -48,8 +50,8 @@ const (
 )

 var viewboxRegex = regexp.MustCompile(`viewBox=\"([0-9\- ]+)\"`)
-var widthRegex = regexp.MustCompile(`width=\"([0-9]+)\"`)
-var heightRegex = regexp.MustCompile(`height=\"([0-9]+)\"`)
+var widthRegex = regexp.MustCompile(`width=\"([.0-9]+)\"`)
+var heightRegex = regexp.MustCompile(`height=\"([.0-9]+)\"`)

 func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []byte {
 	svg := string(in)
@ -68,9 +70,13 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by
 	viewboxHeight, _ := strconv.Atoi(viewboxSlice[3])

 	tl, br := diagram.BoundingBox()
-	seperator := fmt.Sprintf(`<line x1="%d" y1="%d" x2="%d" y2="%d" stroke="#0A0F25" />`,
-		tl.X-PAD_SIDES, br.Y+PAD_TOP, go2.IntMax(w, br.X)+PAD_SIDES, br.Y+PAD_TOP)
-	appendix = seperator + appendix
+	separatorEl := d2themes.NewThemableElement("line")
+	separatorEl.X1 = float64(tl.X - PAD_SIDES)
+	separatorEl.Y1 = float64(br.Y + PAD_TOP)
+	separatorEl.X2 = float64(go2.IntMax(w, br.X) + PAD_SIDES)
+	separatorEl.Y2 = float64(br.Y + PAD_TOP)
+	separatorEl.Stroke = color.B2 // same as --color-border-muted in markdown
+	appendix = separatorEl.Render() + appendix

 	w -= viewboxPadLeft
 	w += PAD_SIDES * 2
@ -82,14 +88,16 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by

 	newViewbox := fmt.Sprintf(`viewBox="%s %s %s %s"`, viewboxSlice[0], viewboxSlice[1], strconv.Itoa(viewboxWidth), strconv.Itoa(viewboxHeight))

-	widthMatch := widthRegex.FindStringSubmatch(svg)
-	heightMatch := heightRegex.FindStringSubmatch(svg)
+	widthMatches := widthRegex.FindAllStringSubmatch(svg, 2)
+	heightMatches := heightRegex.FindAllStringSubmatch(svg, 2)
 	newWidth := fmt.Sprintf(`width="%s"`, strconv.Itoa(viewboxWidth))
 	newHeight := fmt.Sprintf(`height="%s"`, strconv.Itoa(viewboxHeight))

 	svg = strings.Replace(svg, viewboxMatch[0], newViewbox, 1)
-	svg = strings.Replace(svg, widthMatch[0], newWidth, 1)
-	svg = strings.Replace(svg, heightMatch[0], newHeight, 1)
+	for i := 0; i < 2; i++ {
+		svg = strings.Replace(svg, widthMatches[i][0], newWidth, 1)
+		svg = strings.Replace(svg, heightMatches[i][0], newHeight, 1)
+	}

 	if !strings.Contains(svg, `font-family: "font-regular"`) {
 		appendix += fmt.Sprintf(`<style type="text/css"><![CDATA[
--- a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
--- a/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="565" height="683" viewBox="-102 -118 565 683"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="565" height="683" viewBox="-102 -118 565 683"><rect x="-102.000000" y="-118.000000" width="565" height="683" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@ -40,10 +40,10 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-118.000000" width="338.000000" height="452.000000" class=" fill-N7" /><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://terrastruct.com" xlink:href="https://terrastruct.com"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2830374313)" /></g><mask id="2830374313" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
+]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://terrastruct.com" xlink:href="https://terrastruct.com"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2830374313)" /></g><mask id="2830374313" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
 <rect x="-102" y="-118" width="338" height="452" fill="white"></rect>

-</mask><line x1="-42" y1="284" x2="423" y2="284" stroke="#0A0F25" /><g class="appendix" x="-2" y="234" width="138" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">https://d2lang.com</text>
+</mask><line x1="-42.000000" x2="423.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="138" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">https://d2lang.com</text>
 <g transform="translate(0 386)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="386" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text>
 <g transform="translate(0 443)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">3</text></g><text class="text" x="48" y="443" style="font-size: 16px;">https://terrastruct.com</text></g>
 <style type="text/css"><![CDATA[
--- a/d2renderers/d2svg/appendix/testdata/links_dark/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/links_dark/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="565" height="683" viewBox="-102 -118 565 683"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="565" height="683" viewBox="-102 -118 565 683"><rect x="-102.000000" y="-118.000000" width="565" height="683" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@ -40,10 +40,10 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-118.000000" width="338.000000" height="452.000000" class=" fill-N7" /><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://fosny.eu" xlink:href="https://fosny.eu"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2203485110)" /></g><mask id="2203485110" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
+]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://fosny.eu" xlink:href="https://fosny.eu"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2203485110)" /></g><mask id="2203485110" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
 <rect x="-102" y="-118" width="338" height="452" fill="white"></rect>

-</mask><line x1="-42" y1="284" x2="423" y2="284" stroke="#0A0F25" /><g class="appendix" x="-2" y="234" width="138" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">https://d2lang.com</text>
+</mask><line x1="-42.000000" x2="423.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="138" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">https://d2lang.com</text>
 <g transform="translate(0 386)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="386" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text>
 <g transform="translate(0 443)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">3</text></g><text class="text" x="48" y="443" style="font-size: 16px;">https://fosny.eu</text></g>
 <style type="text/css"><![CDATA[
--- a/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="566" height="631" viewBox="-102 -118 566 631"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="566" height="631" viewBox="-102 -118 566 631"><rect x="-102.000000" y="-118.000000" width="566" height="631" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@ -40,10 +40,10 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-118.000000" width="306.000000" height="452.000000" class=" fill-N7" /><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(70 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="86.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3331949590)" /></g><mask id="3331949590" maskUnits="userSpaceOnUse" x="-102" y="-118" width="306" height="452">
+]]></script><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(70 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="86.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3331949590)" /></g><mask id="3331949590" maskUnits="userSpaceOnUse" x="-102" y="-118" width="306" height="452">
 <rect x="-102" y="-118" width="306" height="452" fill="white"></rect>

-</mask><line x1="-42" y1="284" x2="424" y2="284" stroke="#0A0F25" /><g class="appendix" x="-2" y="234" width="106" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">Total abstinence is easier than perfect moderation</text>
+</mask><line x1="-42.000000" x2="424.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="106" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">Total abstinence is easier than perfect moderation</text>
 <g transform="translate(0 386)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="386" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text></g>
 <style type="text/css"><![CDATA[
 .text {
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@ -1576,8 +1576,8 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	// TODO minify
 	docRendered := fmt.Sprintf(`<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="%d" height="%d" viewBox="%d %d %d %d">%s%s%s</svg>`,
 		w, h, left, top, w, h,
+		backgroundEl.Render(), // must be first
 		upperBuf.String(),
-		backgroundEl.Render(),
 		buf.String(),
 	)
 	return []byte(docRendered), nil
--- a/d2renderers/d2svg/dark_theme/testdata/all_shapes/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/all_shapes/dark_theme.exp.svg
--- a/d2renderers/d2svg/dark_theme/testdata/animated/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/animated/dark_theme.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="431" height="800" viewBox="-102 -100 431 800"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="431" height="800" viewBox="-102 -100 431 800"><rect x="-102.000000" y="-100.000000" width="431.000000" height="800.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -50,7 +50,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-100.000000" width="431.000000" height="800.000000" class=" fill-N7" /><g id="winter"><g class="shape" ><rect x="16.000000" y="44.000000" width="211.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="121.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="0.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="77.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="trees"><g class="shape" ><rect x="84.000000" y="532.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="126.500000" y="570.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">trees</text></g><g id="winter.snow"><g class="shape" ><rect x="82.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="126.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="40.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="77.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 105.419957 139.380111 C 83.373494 160.400000 77.500000 176.000000 77.500000 191.000000 C 77.500000 206.000000 77.500000 280.400000 77.500000 334.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><g id="(summer.sun -&gt; trees)[0]"><path d="M 77.500000 406.000000 C 77.500000 426.400000 83.300000 492.000000 104.493128 528.539875" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><g id="(trees -&gt; winter.snow)[0]"><path d="M 146.645435 530.275464 C 169.126506 492.000000 175.000000 472.000000 175.000000 457.000000 C 175.000000 442.000000 175.000000 415.400000 175.000000 390.500000 C 175.000000 365.600000 175.000000 332.400000 175.000000 307.500000 C 175.000000 282.600000 175.000000 256.000000 175.000000 241.000000 C 175.000000 226.000000 169.200000 160.400000 148.877606 140.778378" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><mask id="1960707820" maskUnits="userSpaceOnUse" x="-102" y="-100" width="431" height="800">
+]]></script><g id="winter"><g class="shape" ><rect x="16.000000" y="44.000000" width="211.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="121.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="0.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="77.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="trees"><g class="shape" ><rect x="84.000000" y="532.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="126.500000" y="570.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">trees</text></g><g id="winter.snow"><g class="shape" ><rect x="82.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="126.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="40.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="77.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 105.419957 139.380111 C 83.373494 160.400000 77.500000 176.000000 77.500000 191.000000 C 77.500000 206.000000 77.500000 280.400000 77.500000 334.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><g id="(summer.sun -&gt; trees)[0]"><path d="M 77.500000 406.000000 C 77.500000 426.400000 83.300000 492.000000 104.493128 528.539875" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><g id="(trees -&gt; winter.snow)[0]"><path d="M 146.645435 530.275464 C 169.126506 492.000000 175.000000 472.000000 175.000000 457.000000 C 175.000000 442.000000 175.000000 415.400000 175.000000 390.500000 C 175.000000 365.600000 175.000000 332.400000 175.000000 307.500000 C 175.000000 282.600000 175.000000 256.000000 175.000000 241.000000 C 175.000000 226.000000 169.200000 160.400000 148.877606 140.778378" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><mask id="1960707820" maskUnits="userSpaceOnUse" x="-102" y="-100" width="431" height="800">
 <rect x="-102" y="-100" width="431" height="800" fill="white"></rect>

 </mask></svg>
--- a/d2renderers/d2svg/dark_theme/testdata/arrowheads/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/arrowheads/dark_theme.exp.svg
--- a/d2renderers/d2svg/dark_theme/testdata/basic/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/basic/dark_theme.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="259" height="436" viewBox="-102 -102 259 436"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="259" height="436" viewBox="-102 -102 259 436"><rect x="-102.000000" y="-102.000000" width="259.000000" height="436.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="259.000000" height="436.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 106.000000 27.500000 126.000000 27.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1546762055)" /></g><mask id="1546762055" maskUnits="userSpaceOnUse" x="-102" y="-102" width="259" height="436">
+]]></script><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 106.000000 27.500000 126.000000 27.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1546762055)" /></g><mask id="1546762055" maskUnits="userSpaceOnUse" x="-102" y="-102" width="259" height="436">
 <rect x="-102" y="-102" width="259" height="436" fill="white"></rect>

 </mask></svg>
--- a/d2renderers/d2svg/dark_theme/testdata/child_to_child/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/child_to_child/dark_theme.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="372" height="634" viewBox="-102 -100 372 634"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="372" height="634" viewBox="-102 -100 372 634"><rect x="-102.000000" y="-100.000000" width="372.000000" height="634.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -44,7 +44,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-100.000000" width="372.000000" height="634.000000" class=" fill-N7" /><g id="winter"><g class="shape" ><rect x="0.000000" y="44.000000" width="168.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="7.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="winter.snow"><g class="shape" ><rect x="40.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="47.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 84.000000 140.000000 C 84.000000 160.400000 84.000000 176.000000 84.000000 191.000000 C 84.000000 206.000000 84.000000 280.400000 84.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3732100081)" /></g><mask id="3732100081" maskUnits="userSpaceOnUse" x="-102" y="-100" width="372" height="634">
+]]></script><g id="winter"><g class="shape" ><rect x="0.000000" y="44.000000" width="168.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="7.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="winter.snow"><g class="shape" ><rect x="40.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="47.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 84.000000 140.000000 C 84.000000 160.400000 84.000000 176.000000 84.000000 191.000000 C 84.000000 206.000000 84.000000 280.400000 84.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3732100081)" /></g><mask id="3732100081" maskUnits="userSpaceOnUse" x="-102" y="-100" width="372" height="634">
 <rect x="-102" y="-100" width="372" height="634" fill="white"></rect>

 </mask></svg>
--- a/d2renderers/d2svg/dark_theme/testdata/class/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/class/dark_theme.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="626" height="572" viewBox="-102 -102 626 572"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="626" height="572" viewBox="-102 -102 626 572"><rect x="-102.000000" y="-102.000000" width="626.000000" height="572.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="626.000000" height="572.000000" class=" fill-N7" /><g id="manager"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="211.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><mask id="3945613123" maskUnits="userSpaceOnUse" x="-102" y="-102" width="626" height="572">
+]]></script><g id="manager"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="211.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><mask id="3945613123" maskUnits="userSpaceOnUse" x="-102" y="-102" width="626" height="572">
 <rect x="-102" y="-102" width="626" height="572" fill="white"></rect>

 </mask></svg>
--- a/d2renderers/d2svg/dark_theme/testdata/connection_label/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/connection_label/dark_theme.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="259" height="459" viewBox="-102 -102 259 459"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="259" height="459" viewBox="-102 -102 259 459"><rect x="-102.000000" y="-102.000000" width="259.000000" height="459.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -44,7 +44,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="259.000000" height="459.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="189.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 115.200000 27.500000 139.900000 27.500000 185.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3815404280)" /><text x="27.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="3815404280" maskUnits="userSpaceOnUse" x="-102" y="-102" width="259" height="459">
+]]></script><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="189.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 115.200000 27.500000 139.900000 27.500000 185.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3815404280)" /><text x="27.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="3815404280" maskUnits="userSpaceOnUse" x="-102" y="-102" width="259" height="459">
 <rect x="-102" y="-102" width="259" height="459" fill="white"></rect>
 <rect x="12.000000" y="116.000000" width="31" height="23" fill="black"></rect>
 </mask></svg>
--- a/d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1096" height="481" viewBox="-100 -102 1096 481"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1096" height="481" viewBox="-100 -102 1096 481"><rect x="-100.000000" y="-102.000000" width="1096.000000" height="481.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -793,7 +793,7 @@
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><rect x="-100.000000" y="-102.000000" width="1096.000000" height="481.000000" class=" fill-N7" /><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>
+</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="874.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="683.000000" x2="894.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.000000 71.000000 C 189.000000 127.000000 189.000000 155.500000 189.000000 207.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#928565738)" /><text x="189.000000" y="137.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="189.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="189.000000" dy="19.500000">just how to work the computer.</tspan></text></g><mask id="928565738" maskUnits="userSpaceOnUse" x="-100" y="-102" width="1096" height="481">
 <rect x="-100" y="-102" width="1096" height="481" fill="white"></rect>
 <rect x="0.000000" y="121.000000" width="378" height="39" fill="black"></rect>
--- a/d2renderers/d2svg/dark_theme/testdata/overlay/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/overlay/dark_theme.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="760" height="270" viewBox="-102 -102 760 270"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="760" height="270" viewBox="-102 -102 760 270"><rect x="-102.000000" y="-102.000000" width="760.000000" height="270.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="760.000000" height="270.000000" class=" fill-N7" /><g id="bright"><g class="shape" ><rect x="0.000000" y="0.000000" width="94.000000" height="66.000000" stroke="#000" fill="#fff" style="stroke-width:2;" /></g><text x="47.000000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">bright</text></g><g id="normal"><g class="shape" ><rect x="154.000000" y="0.000000" width="101.000000" height="66.000000" stroke="#000" fill="#ccc" style="stroke-width:2;" /></g><text x="204.500000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">normal</text></g><g id="dark"><g class="shape" ><rect x="315.000000" y="0.000000" width="82.000000" height="66.000000" stroke="#000" fill="#555" style="stroke-width:2;" /></g><text x="356.000000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">dark</text></g><g id="darker"><g class="shape" ><rect x="457.000000" y="0.000000" width="99.000000" height="66.000000" stroke="#000" fill="#000" style="stroke-width:2;" /></g><text x="506.500000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">darker</text></g><mask id="2779170942" maskUnits="userSpaceOnUse" x="-102" y="-102" width="760" height="270">
+]]></script><g id="bright"><g class="shape" ><rect x="0.000000" y="0.000000" width="94.000000" height="66.000000" stroke="#000" fill="#fff" style="stroke-width:2;" /></g><text x="47.000000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">bright</text></g><g id="normal"><g class="shape" ><rect x="154.000000" y="0.000000" width="101.000000" height="66.000000" stroke="#000" fill="#ccc" style="stroke-width:2;" /></g><text x="204.500000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">normal</text></g><g id="dark"><g class="shape" ><rect x="315.000000" y="0.000000" width="82.000000" height="66.000000" stroke="#000" fill="#555" style="stroke-width:2;" /></g><text x="356.000000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">dark</text></g><g id="darker"><g class="shape" ><rect x="457.000000" y="0.000000" width="99.000000" height="66.000000" stroke="#000" fill="#000" style="stroke-width:2;" /></g><text x="506.500000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">darker</text></g><mask id="2779170942" maskUnits="userSpaceOnUse" x="-102" y="-102" width="760" height="270">
 <rect x="-102" y="-102" width="760" height="270" fill="white"></rect>

 </mask></svg>
--- a/d2renderers/d2svg/dark_theme/testdata/sql_tables/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/sql_tables/dark_theme.exp.svg
--- a/d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.exp.svg
--- a/e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="316" height="248" viewBox="-102 -102 316 248"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="316" height="248" viewBox="-102 -102 316 248"><rect x="-102.000000" y="-102.000000" width="316.000000" height="248.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
 }
@ -30,7 +30,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="316.000000" height="248.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="44.000000" y2="44.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="148127623" maskUnits="userSpaceOnUse" x="-102" y="-102" width="316" height="248">
+]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="44.000000" y2="44.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="148127623" maskUnits="userSpaceOnUse" x="-102" y="-102" width="316" height="248">
 <rect x="-102" y="-102" width="316" height="248" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="304" height="304" viewBox="-102 -102 304 304"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="304" height="304" viewBox="-102 -102 304 304"><rect x="-102.000000" y="-102.000000" width="304.000000" height="304.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
 }
@ -30,7 +30,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="304.000000" height="304.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="198791073" maskUnits="userSpaceOnUse" x="-102" y="-102" width="304" height="304">
+]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="198791073" maskUnits="userSpaceOnUse" x="-102" y="-102" width="304" height="304">
 <rect x="-102" y="-102" width="304" height="304" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="254" height="216" viewBox="-102 -102 254 216"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="254" height="216" viewBox="-102 -102 254 216"><rect x="-102.000000" y="-102.000000" width="254.000000" height="216.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
 }
@ -30,7 +30,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="254.000000" height="216.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="class_header fill-N1" /></g></g><mask id="2388684491" maskUnits="userSpaceOnUse" x="-102" y="-102" width="254" height="216">
+]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="class_header fill-N1" /></g></g><mask id="2388684491" maskUnits="userSpaceOnUse" x="-102" y="-102" width="254" height="216">
 <rect x="-102" y="-102" width="254" height="216" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="572" height="286" viewBox="-102 -118 572 286"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="572" height="286" viewBox="-102 -118 572 286"><rect x="-102.000000" y="-118.000000" width="572.000000" height="286.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@ -40,7 +40,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-118.000000" width="572.000000" height="286.000000" class=" fill-N7" /><g id="h&amp;y"><g class="shape" ><rect x="0.000000" y="0.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(82 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+]]></script><g id="h&amp;y"><g class="shape" ><rect x="0.000000" y="0.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(82 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
--- a/e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="492" height="286" viewBox="-90 -106 492 286"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="492" height="286" viewBox="-90 -106 492 286"><rect x="-90.000000" y="-106.000000" width="492.000000" height="286.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@ -40,7 +40,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-106.000000" width="492.000000" height="286.000000" class=" fill-N7" /><g id="h&amp;y"><g class="shape" ><rect x="12.000000" y="12.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="61.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(94 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+]]></script><g id="h&amp;y"><g class="shape" ><rect x="12.000000" y="12.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="61.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(94 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
--- a/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="883" height="354" viewBox="-102 -102 883 354"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="883" height="354" viewBox="-102 -102 883 354"><rect x="-102.000000" y="-102.000000" width="883.000000" height="354.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@ -65,7 +65,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="883.000000" height="354.000000" class=" fill-N7" /><g id="hello world"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
+]]></script><g id="hello world"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">#&#160;2&#160;leading,&#160;2&#160;trailing</tspan>
 </text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve"><tspan fill="#000000" class="text-mono-bold">def</tspan>&#160;<tspan fill="#990000" class="text-mono-bold">hello</tspan>():
--- a/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="803" height="354" viewBox="-90 -90 803 354"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="803" height="354" viewBox="-90 -90 803 354"><rect x="-90.000000" y="-90.000000" width="803.000000" height="354.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@ -65,7 +65,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="803.000000" height="354.000000" class=" fill-N7" /><g id="hello world"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
+]]></script><g id="hello world"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">#&#160;2&#160;leading,&#160;2&#160;trailing</tspan>
 </text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve"><tspan fill="#000000" class="text-mono-bold">def</tspan>&#160;<tspan fill="#990000" class="text-mono-bold">hello</tspan>():
--- a/e2etests/testdata/regression/dagre-disconnect/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre-disconnect/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/dagre-disconnect/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre-disconnect/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="562" height="730" viewBox="-102 -100 562 730"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="562" height="730" viewBox="-102 -100 562 730"><rect x="-102.000000" y="-100.000000" width="562.000000" height="730.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -51,7 +51,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-100.000000" width="562.000000" height="730.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="358.000000" height="487.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="179.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="a.b"><g class="shape" ><rect x="40.000000" y="75.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="23.000000" y="355.000000" width="298.000000" height="139.000000" stroke="white" class=" fill-B5" style="stroke-width:2;" /></g><text x="172.000000" y="343.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c</text></g><g id="a.1"><g class="shape" ><rect x="153.000000" y="75.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.000000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="265.000000" y="75.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="291.500000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.c.d"><g class="shape" ><rect x="152.000000" y="391.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="179.000000" y="429.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" stroke="red" class="connection fill-N7" stroke-width="2" /> </marker><path d="M 66.500000 144.000000 C 66.500000 212.400000 66.700000 326.400000 67.391931 352.001460" stroke="red" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#1797289791)" /><text x="67.000000" y="231.000000" fill="red" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="67.000000" dy="0.000000">line 1</tspan><tspan x="67.000000" dy="17.250000">line 2</tspan><tspan x="67.000000" dy="17.250000">line 3</tspan><tspan x="67.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 179.000000 144.000000 C 179.000000 212.400000 179.000000 326.400000 179.000000 352.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1797289791)" /></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 291.500000 146.000000 C 291.500000 212.400000 291.300000 326.400000 290.608069 352.001460" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1797289791)" /></g><mask id="1797289791" maskUnits="userSpaceOnUse" x="-102" y="-100" width="562" height="730">
+]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="358.000000" height="487.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="179.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="a.b"><g class="shape" ><rect x="40.000000" y="75.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="23.000000" y="355.000000" width="298.000000" height="139.000000" stroke="white" class=" fill-B5" style="stroke-width:2;" /></g><text x="172.000000" y="343.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c</text></g><g id="a.1"><g class="shape" ><rect x="153.000000" y="75.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.000000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="265.000000" y="75.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="291.500000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.c.d"><g class="shape" ><rect x="152.000000" y="391.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="179.000000" y="429.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" stroke="red" class="connection fill-N7" stroke-width="2" /> </marker><path d="M 66.500000 144.000000 C 66.500000 212.400000 66.700000 326.400000 67.391931 352.001460" stroke="red" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#1797289791)" /><text x="67.000000" y="231.000000" fill="red" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="67.000000" dy="0.000000">line 1</tspan><tspan x="67.000000" dy="17.250000">line 2</tspan><tspan x="67.000000" dy="17.250000">line 3</tspan><tspan x="67.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 179.000000 144.000000 C 179.000000 212.400000 179.000000 326.400000 179.000000 352.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1797289791)" /></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 291.500000 146.000000 C 291.500000 212.400000 291.300000 326.400000 290.608069 352.001460" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1797289791)" /></g><mask id="1797289791" maskUnits="userSpaceOnUse" x="-102" y="-100" width="562" height="730">
 <rect x="-102" y="-100" width="562" height="730" fill="white"></rect>
 <rect x="49.000000" y="215.000000" width="36" height="69" fill="black"></rect>
 </mask></svg>
--- a/e2etests/testdata/regression/dagre_broken_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_broken_arrowhead/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="494" height="755" viewBox="-90 -90 494 755"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="494" height="755" viewBox="-90 -90 494 755"><rect x="-90.000000" y="-90.000000" width="494.000000" height="755.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -51,7 +51,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="494.000000" height="755.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="290.000000" height="551.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="157.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="a.b"><g class="shape" ><rect x="62.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="76.000000" y="347.000000" width="154.000000" height="166.000000" stroke="white" class=" fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="376.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c</text></g><g id="a.1"><g class="shape" ><rect x="127.000000" y="201.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="239.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="199.000000" y="201.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="225.500000" y="239.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.c.d"><g class="shape" ><rect x="126.000000" y="397.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.000000" y="435.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" stroke="red" class="connection fill-N7" stroke-width="2" /> </marker><path d="M 88.500000 130.000000 L 88.500000 297.000000 S 88.500000 307.000000 98.500000 307.000000 L 105.000000 307.000000 S 115.000000 307.000000 115.000000 317.000000 L 115.000000 343.000000" stroke="red" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#1205642168)" /><text x="89.000000" y="232.000000" fill="red" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="89.000000" dy="0.000000">line 1</tspan><tspan x="89.000000" dy="17.250000">line 2</tspan><tspan x="89.000000" dy="17.250000">line 3</tspan><tspan x="89.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 153.500000 269.000000 L 153.500000 343.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1205642168)" /></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 226.000000 271.000000 L 226.000000 297.000000 S 226.000000 307.000000 216.000000 307.000000 L 202.000000 307.000000 S 192.000000 307.000000 192.000000 317.000000 L 192.000000 343.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1205642168)" /></g><mask id="1205642168" maskUnits="userSpaceOnUse" x="-90" y="-90" width="494" height="755">
+]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="290.000000" height="551.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="157.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="a.b"><g class="shape" ><rect x="62.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="76.000000" y="347.000000" width="154.000000" height="166.000000" stroke="white" class=" fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="376.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c</text></g><g id="a.1"><g class="shape" ><rect x="127.000000" y="201.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="239.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="199.000000" y="201.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="225.500000" y="239.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.c.d"><g class="shape" ><rect x="126.000000" y="397.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.000000" y="435.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" stroke="red" class="connection fill-N7" stroke-width="2" /> </marker><path d="M 88.500000 130.000000 L 88.500000 297.000000 S 88.500000 307.000000 98.500000 307.000000 L 105.000000 307.000000 S 115.000000 307.000000 115.000000 317.000000 L 115.000000 343.000000" stroke="red" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#1205642168)" /><text x="89.000000" y="232.000000" fill="red" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="89.000000" dy="0.000000">line 1</tspan><tspan x="89.000000" dy="17.250000">line 2</tspan><tspan x="89.000000" dy="17.250000">line 3</tspan><tspan x="89.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 153.500000 269.000000 L 153.500000 343.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1205642168)" /></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 226.000000 271.000000 L 226.000000 297.000000 S 226.000000 307.000000 216.000000 307.000000 L 202.000000 307.000000 S 192.000000 307.000000 192.000000 317.000000 L 192.000000 343.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1205642168)" /></g><mask id="1205642168" maskUnits="userSpaceOnUse" x="-90" y="-90" width="494" height="755">
 <rect x="-90" y="-90" width="494" height="755" fill="white"></rect>
 <rect x="71.000000" y="216.000000" width="36" height="69" fill="black"></rect>
 </mask></svg>
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2532" height="359" viewBox="-102 -100 2532 359"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2532" height="359" viewBox="-102 -100 2532 359"><rect x="-102.000000" y="-100.000000" width="2532.000000" height="359.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -51,7 +51,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-100.000000" width="2532.000000" height="359.000000" class=" fill-N7" /><g id="build_workflow"><g class="shape" ><rect x="0.000000" y="41.000000" width="2328.000000" height="116.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1164.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105.000000" y="60.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="240.000000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="638.000000" y="60.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="742.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1194.000000" y="60.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1229.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1593.000000" y="60.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1672.000000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2129.000000" y="60.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2176.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 377.500000 99.000000 C 479.900000 99.000000 532.300000 99.000000 633.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="507.000000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 848.500000 99.000000 C 985.300000 99.000000 1054.700000 99.000000 1189.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1020.000000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1269.500000 99.000000 C 1395.900000 99.000000 1461.300000 99.000000 1588.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1429.500000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1753.500000 99.000000 C 1901.900000 99.000000 1977.300000 99.000000 2124.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1940.500000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Changes the live lambdas</text></g><mask id="1566378409" maskUnits="userSpaceOnUse" x="-102" y="-100" width="2532" height="359">
+]]></script><g id="build_workflow"><g class="shape" ><rect x="0.000000" y="41.000000" width="2328.000000" height="116.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1164.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105.000000" y="60.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="240.000000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="638.000000" y="60.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="742.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1194.000000" y="60.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1229.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1593.000000" y="60.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1672.000000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2129.000000" y="60.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2176.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 377.500000 99.000000 C 479.900000 99.000000 532.300000 99.000000 633.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="507.000000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 848.500000 99.000000 C 985.300000 99.000000 1054.700000 99.000000 1189.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1020.000000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1269.500000 99.000000 C 1395.900000 99.000000 1461.300000 99.000000 1588.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1429.500000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1753.500000 99.000000 C 1901.900000 99.000000 1977.300000 99.000000 2124.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1940.500000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Changes the live lambdas</text></g><mask id="1566378409" maskUnits="userSpaceOnUse" x="-102" y="-100" width="2532" height="359">
 <rect x="-102" y="-100" width="2532" height="359" fill="white"></rect>
 <rect x="480.000000" y="89.000000" width="54" height="21" fill="black"></rect>
 <rect x="951.000000" y="89.000000" width="138" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2147" height="381" viewBox="-90 -90 2147 381"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2147" height="381" viewBox="-90 -90 2147 381"><rect x="-90.000000" y="-90.000000" width="2147.000000" height="381.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -51,7 +51,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="2147.000000" height="381.000000" class=" fill-N7" /><g id="build_workflow"><g class="shape" ><rect x="12.000000" y="12.000000" width="1943.000000" height="177.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="983.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="62.000000" y="62.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="526.000000" y="62.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="630.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1013.000000" y="62.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1048.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1343.000000" y="62.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1422.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1810.000000" y="62.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1857.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 334.000000 100.500000 L 522.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="429.000000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 737.000000 100.500000 L 1009.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="874.000000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1088.000000 100.500000 L 1339.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="1213.500000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1503.000000 100.500000 L 1806.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="1655.500000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Changes the live lambdas</text></g><mask id="2840142333" maskUnits="userSpaceOnUse" x="-90" y="-90" width="2147" height="381">
+]]></script><g id="build_workflow"><g class="shape" ><rect x="12.000000" y="12.000000" width="1943.000000" height="177.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="983.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="62.000000" y="62.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="526.000000" y="62.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="630.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1013.000000" y="62.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1048.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1343.000000" y="62.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1422.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1810.000000" y="62.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1857.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 334.000000 100.500000 L 522.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="429.000000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 737.000000 100.500000 L 1009.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="874.000000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1088.000000 100.500000 L 1339.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="1213.500000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1503.000000 100.500000 L 1806.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="1655.500000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Changes the live lambdas</text></g><mask id="2840142333" maskUnits="userSpaceOnUse" x="-90" y="-90" width="2147" height="381">
 <rect x="-90" y="-90" width="2147" height="381" fill="white"></rect>
 <rect x="402.000000" y="90.000000" width="54" height="21" fill="black"></rect>
 <rect x="805.000000" y="90.000000" width="138" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1071" height="452" viewBox="-102 -102 1071 452"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1071" height="452" viewBox="-102 -102 1071 452"><rect x="-102.000000" y="-102.000000" width="1071.000000" height="452.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="1071.000000" height="452.000000" class=" fill-N7" /><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0.000000" y="0.000000" width="91.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="45.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="45.500000" dy="0.000000">ninety</tspan><tspan x="45.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="151.000000" y="8.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="196.500000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="302.000000" y="0.000000" width="102.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="353.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="353.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="353.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="464.000000" y="8.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="511.000000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\yode</text></g><g id="there"><g class="shape" ><rect x="624.000000" y="182.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="665.500000" y="220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="618.000000" y="8.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="665.000000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="772.000000" y="8.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="819.500000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 511.000000 76.000000 C 511.000000 120.400000 533.500000 144.126623 619.978850 190.735354" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 665.000000 76.000000 C 665.000000 120.400000 665.000000 142.000000 665.000000 178.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 819.500000 76.000000 C 819.500000 120.400000 796.900000 144.000000 710.032868 190.124141" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><mask id="800397963" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1071" height="452">
+]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0.000000" y="0.000000" width="91.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="45.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="45.500000" dy="0.000000">ninety</tspan><tspan x="45.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="151.000000" y="8.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="196.500000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="302.000000" y="0.000000" width="102.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="353.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="353.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="353.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="464.000000" y="8.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="511.000000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\yode</text></g><g id="there"><g class="shape" ><rect x="624.000000" y="182.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="665.500000" y="220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="618.000000" y="8.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="665.000000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="772.000000" y="8.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="819.500000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 511.000000 76.000000 C 511.000000 120.400000 533.500000 144.126623 619.978850 190.735354" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 665.000000 76.000000 C 665.000000 120.400000 665.000000 142.000000 665.000000 178.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 819.500000 76.000000 C 819.500000 120.400000 796.900000 144.000000 710.032868 190.124141" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><mask id="800397963" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1071" height="452">
 <rect x="-102" y="-102" width="1071" height="452" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="871" height="432" viewBox="-90 -90 871 432"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="871" height="432" viewBox="-90 -90 871 432"><rect x="-90.000000" y="-90.000000" width="871.000000" height="432.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="871.000000" height="432.000000" class=" fill-N7" /><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12.000000" y="12.000000" width="91.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="57.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="57.500000" dy="0.000000">ninety</tspan><tspan x="57.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="123.000000" y="20.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="168.500000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="234.000000" y="12.000000" width="102.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="285.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="285.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="285.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="356.000000" y="28.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.000000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\yode</text></g><g id="there"><g class="shape" ><rect x="475.000000" y="174.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="516.500000" y="212.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="470.000000" y="28.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="517.000000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="584.000000" y="28.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="631.500000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 403.000000 96.000000 L 403.000000 124.000000 S 403.000000 134.000000 413.000000 134.000000 L 486.250000 134.000000 S 496.250000 134.000000 496.250000 144.000000 L 496.250000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 517.000000 96.000000 L 517.000000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 631.500000 96.000000 L 631.500000 124.000000 S 631.500000 134.000000 621.500000 134.000000 L 547.750000 134.000000 S 537.750000 134.000000 537.750000 144.000000 L 537.750000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><mask id="3065707942" maskUnits="userSpaceOnUse" x="-90" y="-90" width="871" height="432">
+]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12.000000" y="12.000000" width="91.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="57.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="57.500000" dy="0.000000">ninety</tspan><tspan x="57.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="123.000000" y="20.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="168.500000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="234.000000" y="12.000000" width="102.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="285.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="285.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="285.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="356.000000" y="28.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.000000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\yode</text></g><g id="there"><g class="shape" ><rect x="475.000000" y="174.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="516.500000" y="212.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="470.000000" y="28.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="517.000000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="584.000000" y="28.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="631.500000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 403.000000 96.000000 L 403.000000 124.000000 S 403.000000 134.000000 413.000000 134.000000 L 486.250000 134.000000 S 496.250000 134.000000 496.250000 144.000000 L 496.250000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 517.000000 96.000000 L 517.000000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 631.500000 96.000000 L 631.500000 124.000000 S 631.500000 134.000000 621.500000 134.000000 L 547.750000 134.000000 S 537.750000 134.000000 537.750000 144.000000 L 537.750000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><mask id="3065707942" maskUnits="userSpaceOnUse" x="-90" y="-90" width="871" height="432">
 <rect x="-90" y="-90" width="871" height="432" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="492" height="332" viewBox="-102 -102 492 332"><rect x="-102.000000" y="-102.000000" width="492.000000" height="332.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
 }
@ -30,7 +30,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="492.000000" height="332.000000" class=" fill-N7" /><g id="img"><g class="shape" ><image x="0.000000" y="0.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-102" y="-102" width="492" height="332">
+]]></script><g id="img"><g class="shape" ><image x="0.000000" y="0.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-102" y="-102" width="492" height="332">
 <rect x="-102" y="-102" width="492" height="332" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="452" height="332" viewBox="-90 -90 452 332"><rect x="-90.000000" y="-90.000000" width="452.000000" height="332.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
 }
@ -30,7 +30,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="452.000000" height="332.000000" class=" fill-N7" /><g id="img"><g class="shape" ><image x="12.000000" y="12.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="-90" y="-90" width="452" height="332">
+]]></script><g id="img"><g class="shape" ><image x="12.000000" y="12.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="-90" y="-90" width="452" height="332">
 <rect x="-90" y="-90" width="452" height="332" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="470" height="368" viewBox="-102 -100 470 368"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="470" height="368" viewBox="-102 -100 470 368"><rect x="-102.000000" y="-100.000000" width="470.000000" height="368.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -44,7 +44,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-100.000000" width="470.000000" height="368.000000" class=" fill-N7" /><g id="x"><g class="shape" ><rect x="0.000000" y="41.000000" width="266.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="133.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="40.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="173.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="199.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 94.699280 85.996998 C 114.333333 73.810345 121.000000 70.500000 123.000000 70.500000 C 125.000000 70.500000 127.666667 77.100000 129.666667 87.000000 C 131.666667 96.900000 131.666667 110.100000 129.666667 120.000000 C 127.666667 129.900000 114.333333 133.189655 96.398561 122.057727" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3864958051)" /></g><mask id="3864958051" maskUnits="userSpaceOnUse" x="-102" y="-100" width="470" height="368">
+]]></script><g id="x"><g class="shape" ><rect x="0.000000" y="41.000000" width="266.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="133.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="40.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="173.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="199.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 94.699280 85.996998 C 114.333333 73.810345 121.000000 70.500000 123.000000 70.500000 C 125.000000 70.500000 127.666667 77.100000 129.666667 87.000000 C 131.666667 96.900000 131.666667 110.100000 129.666667 120.000000 C 127.666667 129.900000 114.333333 133.189655 96.398561 122.057727" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3864958051)" /></g><mask id="3864958051" maskUnits="userSpaceOnUse" x="-102" y="-100" width="470" height="368">
 <rect x="-102" y="-100" width="470" height="368" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="480" height="370" viewBox="-90 -90 480 370"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="480" height="370" viewBox="-90 -90 480 370"><rect x="-90.000000" y="-90.000000" width="480.000000" height="370.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -44,7 +44,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="480.000000" height="370.000000" class=" fill-N7" /><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="276.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="150.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="112.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="185.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="211.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 110.000000 84.000000 L 72.000000 84.000000 S 62.000000 84.000000 62.000000 94.000000 L 62.000000 96.000000 S 62.000000 106.000000 72.000000 106.000000 L 108.000000 106.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2867371107)" /></g><mask id="2867371107" maskUnits="userSpaceOnUse" x="-90" y="-90" width="480" height="370">
+]]></script><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="276.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="150.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="112.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="185.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="211.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 110.000000 84.000000 L 72.000000 84.000000 S 62.000000 84.000000 62.000000 94.000000 L 62.000000 96.000000 S 62.000000 106.000000 72.000000 106.000000 L 108.000000 106.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2867371107)" /></g><mask id="2867371107" maskUnits="userSpaceOnUse" x="-90" y="-90" width="480" height="370">
 <rect x="-90" y="-90" width="480" height="370" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1150" height="518" viewBox="-102 -102 1150 518"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1150" height="518" viewBox="-102 -102 1150 518"><rect x="-102.000000" y="-102.000000" width="1150.000000" height="518.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -786,7 +786,7 @@
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><rect x="-102.000000" y="-102.000000" width="1150.000000" height="518.000000" class=" fill-N7" /><g id="queue"><g class="shape" ><path d="M 24 148 H 922 C 946 148 946 223 946 231 C 946 239 946 314 922 314 H 24 C 0 314 0 239 0 231 C 0 223 0 148 24 148 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 922 148 C 898 148 898 223 898 231 C 898 239 898 314 922 314" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g></g><g id="m0_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="20.000000" y="12.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Oldest message</p>
+</style><g id="queue"><g class="shape" ><path d="M 24 148 H 922 C 946 148 946 223 946 231 C 946 239 946 314 922 314 H 24 C 0 314 0 239 0 231 C 0 223 0 148 24 148 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 922 148 C 898 148 898 223 898 231 C 898 239 898 314 922 314" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g></g><g id="m0_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="20.000000" y="12.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Oldest message</p>
 </div></foreignObject></g></g><g id="m2_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="302.000000" y="12.000000" width="41" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Offset</p>
 </div></foreignObject></g></g><g id="m5_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="654.000000" y="12.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Last message</p>
 </div></foreignObject></g></g><g id="m6_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="804.000000" y="0.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Next message will be<br />
--- a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="880" height="503" viewBox="-90 -90 880 503"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="880" height="503" viewBox="-90 -90 880 503"><rect x="-90.000000" y="-90.000000" width="880.000000" height="503.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -786,7 +786,7 @@
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><rect x="-90.000000" y="-90.000000" width="880.000000" height="503.000000" class=" fill-N7" /><g id="queue"><g class="shape" ><path d="M 36 145 H 664 C 688 145 688 220 688 228 C 688 236 688 311 664 311 H 36 C 12 311 12 236 12 228 C 12 220 12 145 36 145 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 664 145 C 640 145 640 220 640 228 C 640 236 640 311 664 311" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g></g><g id="m0_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="41.000000" y="36.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Oldest message</p>
+</style><g id="queue"><g class="shape" ><path d="M 36 145 H 664 C 688 145 688 220 688 228 C 688 236 688 311 664 311 H 36 C 12 311 12 236 12 228 C 12 220 12 145 36 145 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 664 145 C 640 145 640 220 640 228 C 640 236 640 311 664 311" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g></g><g id="m0_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="41.000000" y="36.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Oldest message</p>
 </div></foreignObject></g></g><g id="m2_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="244.000000" y="36.000000" width="41" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Offset</p>
 </div></foreignObject></g></g><g id="m5_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="425.000000" y="36.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Last message</p>
 </div></foreignObject></g></g><g id="m6_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="535.000000" y="12.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Next message will be<br />
--- a/e2etests/testdata/regression/empty_class_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_class_height/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="945" height="388" viewBox="-102 -102 945 388"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="945" height="388" viewBox="-102 -102 945 388"><rect x="-102.000000" y="-102.000000" width="945.000000" height="388.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="945.000000" height="388.000000" class=" fill-N7" /><g id="class1"><g class="shape" ><rect x="0.000000" y="0.000000" width="319.000000" height="184.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="319.000000" height="92.000000" class="class_header fill-N1" /><text x="159.500000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class with rows</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="299.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="299.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><line x1="0.000000" x2="319.000000" y1="184.000000" y2="184.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="class2"><g class="shape" ><rect x="379.000000" y="46.000000" width="362.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="379.000000" y="46.000000" width="362.000000" height="92.000000" class="class_header fill-N1" /><text x="560.000000" y="99.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class without rows</text><line x1="379.000000" x2="741.000000" y1="138.000000" y2="138.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="3149201134" maskUnits="userSpaceOnUse" x="-102" y="-102" width="945" height="388">
+]]></script><g id="class1"><g class="shape" ><rect x="0.000000" y="0.000000" width="319.000000" height="184.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="319.000000" height="92.000000" class="class_header fill-N1" /><text x="159.500000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class with rows</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="299.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="299.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><line x1="0.000000" x2="319.000000" y1="184.000000" y2="184.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="class2"><g class="shape" ><rect x="379.000000" y="46.000000" width="362.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="379.000000" y="46.000000" width="362.000000" height="92.000000" class="class_header fill-N1" /><text x="560.000000" y="99.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class without rows</text><line x1="379.000000" x2="741.000000" y1="138.000000" y2="138.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="3149201134" maskUnits="userSpaceOnUse" x="-102" y="-102" width="945" height="388">
 <rect x="-102" y="-102" width="945" height="388" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/empty_class_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_class_height/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="905" height="388" viewBox="-90 -90 905 388"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="905" height="388" viewBox="-90 -90 905 388"><rect x="-90.000000" y="-90.000000" width="905.000000" height="388.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="905.000000" height="388.000000" class=" fill-N7" /><g id="class1"><g class="shape" ><rect x="12.000000" y="12.000000" width="319.000000" height="184.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="319.000000" height="92.000000" class="class_header fill-N1" /><text x="171.500000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class with rows</text><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="311.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="311.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><line x1="12.000000" x2="331.000000" y1="196.000000" y2="196.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="class2"><g class="shape" ><rect x="351.000000" y="58.000000" width="362.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="58.000000" width="362.000000" height="92.000000" class="class_header fill-N1" /><text x="532.000000" y="111.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class without rows</text><line x1="351.000000" x2="713.000000" y1="150.000000" y2="150.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="2428178623" maskUnits="userSpaceOnUse" x="-90" y="-90" width="905" height="388">
+]]></script><g id="class1"><g class="shape" ><rect x="12.000000" y="12.000000" width="319.000000" height="184.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="319.000000" height="92.000000" class="class_header fill-N1" /><text x="171.500000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class with rows</text><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="311.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="311.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><line x1="12.000000" x2="331.000000" y1="196.000000" y2="196.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="class2"><g class="shape" ><rect x="351.000000" y="58.000000" width="362.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="58.000000" width="362.000000" height="92.000000" class="class_header fill-N1" /><text x="532.000000" y="111.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class without rows</text><line x1="351.000000" x2="713.000000" y1="150.000000" y2="150.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="2428178623" maskUnits="userSpaceOnUse" x="-90" y="-90" width="905" height="388">
 <rect x="-90" y="-90" width="905" height="388" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="306" height="432" viewBox="-100 -100 306 432"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="306" height="432" viewBox="-100 -100 306 432"><rect x="-100.000000" y="-100.000000" width="306.000000" height="432.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-100.000000" y="-100.000000" width="306.000000" height="432.000000" class=" fill-N7" /><g id="A"><g class="shape" ><rect x="13.000000" y="0.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="53.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="B"><g class="shape" ><rect x="0.000000" y="166.000000" width="106.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="53.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 53.000000 67.000000 C 53.000000 106.000000 53.000000 126.000000 53.000000 163.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2807129037)" /></g><mask id="2807129037" maskUnits="userSpaceOnUse" x="-100" y="-100" width="306" height="432">
+]]></script><g id="A"><g class="shape" ><rect x="13.000000" y="0.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="53.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="B"><g class="shape" ><rect x="0.000000" y="166.000000" width="106.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="53.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 53.000000 67.000000 C 53.000000 106.000000 53.000000 126.000000 53.000000 163.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2807129037)" /></g><mask id="2807129037" maskUnits="userSpaceOnUse" x="-100" y="-100" width="306" height="432">
 <rect x="-100" y="-100" width="306" height="432" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="306" height="402" viewBox="-88 -88 306 402"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="306" height="402" viewBox="-88 -88 306 402"><rect x="-88.000000" y="-88.000000" width="306.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-88.000000" y="-88.000000" width="306.000000" height="402.000000" class=" fill-N7" /><g id="A"><g class="shape" ><rect x="25.000000" y="12.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="65.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="B"><g class="shape" ><rect x="12.000000" y="148.000000" width="106.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="65.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 65.000000 79.000000 L 65.000000 145.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2528305922)" /></g><mask id="2528305922" maskUnits="userSpaceOnUse" x="-88" y="-88" width="306" height="402">
+]]></script><g id="A"><g class="shape" ><rect x="25.000000" y="12.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="65.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="B"><g class="shape" ><rect x="12.000000" y="148.000000" width="106.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="65.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 65.000000 79.000000 L 65.000000 145.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2528305922)" /></g><mask id="2528305922" maskUnits="userSpaceOnUse" x="-88" y="-88" width="306" height="402">
 <rect x="-88" y="-88" width="306" height="402" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/just-width/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/just-width/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="466" height="265" viewBox="-102 -102 466 265"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="466" height="265" viewBox="-102 -102 466 265"><rect x="-102.000000" y="-102.000000" width="466.000000" height="265.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="466.000000" height="265.000000" class=" fill-N7" /><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="262.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="131.000000" y="36.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teamwork: having someone to blame</text></g><mask id="824054296" maskUnits="userSpaceOnUse" x="-102" y="-102" width="466" height="265">
+]]></script><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="262.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="131.000000" y="36.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teamwork: having someone to blame</text></g><mask id="824054296" maskUnits="userSpaceOnUse" x="-102" y="-102" width="466" height="265">
 <rect x="-102" y="-102" width="466" height="265" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/just-width/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/just-width/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="466" height="265" viewBox="-90 -90 466 265"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="466" height="265" viewBox="-90 -90 466 265"><rect x="-90.000000" y="-90.000000" width="466.000000" height="265.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="466.000000" height="265.000000" class=" fill-N7" /><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="262.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="143.000000" y="48.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teamwork: having someone to blame</text></g><mask id="1205229616" maskUnits="userSpaceOnUse" x="-90" y="-90" width="466" height="265">
+]]></script><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="262.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="143.000000" y="48.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teamwork: having someone to blame</text></g><mask id="1205229616" maskUnits="userSpaceOnUse" x="-90" y="-90" width="466" height="265">
 <rect x="-90" y="-90" width="466" height="265" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="299" height="651" viewBox="-102 -102 299 651"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="299" height="651" viewBox="-102 -102 299 651"><rect x="-102.000000" y="-102.000000" width="299.000000" height="651.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -786,7 +786,7 @@
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><rect x="-102.000000" y="-102.000000" width="299.000000" height="651.000000" class=" fill-N7" /><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="95" height="115"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><h1>hey</h1>
+</style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="95" height="115"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><h1>hey</h1>
 <ul>
 <li>they
 <ol>
--- a/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="299" height="591" viewBox="-90 -90 299 591"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="299" height="591" viewBox="-90 -90 299 591"><rect x="-90.000000" y="-90.000000" width="299.000000" height="591.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -786,7 +786,7 @@
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><rect x="-90.000000" y="-90.000000" width="299.000000" height="591.000000" class=" fill-N7" /><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="95" height="115"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><h1>hey</h1>
+</style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="95" height="115"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><h1>hey</h1>
 <ul>
 <li>they
 <ol>
--- a/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="277" height="242" viewBox="-102 -102 277 242"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="277" height="242" viewBox="-102 -102 277 242"><rect x="-102.000000" y="-102.000000" width="277.000000" height="242.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="277.000000" height="242.000000" class=" fill-N7" /><g id="x"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="73.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="1323269655" maskUnits="userSpaceOnUse" x="-102" y="-102" width="277" height="242">
+]]></script><g id="x"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="73.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="1323269655" maskUnits="userSpaceOnUse" x="-102" y="-102" width="277" height="242">
 <rect x="-102" y="-102" width="277" height="242" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="277" height="242" viewBox="-90 -90 277 242"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="277" height="242" viewBox="-90 -90 277 242"><rect x="-90.000000" y="-90.000000" width="277.000000" height="242.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="277.000000" height="242.000000" class=" fill-N7" /><g id="x"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="73.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="4118793327" maskUnits="userSpaceOnUse" x="-90" y="-90" width="277" height="242">
+]]></script><g id="x"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="73.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="4118793327" maskUnits="userSpaceOnUse" x="-90" y="-90" width="277" height="242">
 <rect x="-90" y="-90" width="277" height="242" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1286" height="604" viewBox="-102 -102 1286 604"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1286" height="604" viewBox="-102 -102 1286 604"><rect x="-102.000000" y="-102.000000" width="1286.000000" height="604.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -44,7 +44,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="1286.000000" height="604.000000" class=" fill-N7" /><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="1082.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="1082.000000" height="92.000000" class="class_header fill-N1" /><text x="541.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" x2="1082.000000" y1="92.000000" y2="92.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="table"><g class="shape" ><rect x="351.000000" y="192.000000" width="381.000000" height="36.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="192.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="361.000000" y="217.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect x="351.000000" y="328.000000" width="381.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="328.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="361.000000" y="353.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text><text x="361.000000" y="387.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">ok</text><text x="402.000000" y="387.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="712.000000" y="387.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="351.000000" x2="732.000000" y1="400.000000" y2="400.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 541.000000 94.000000 C 541.000000 132.000000 541.000000 152.000000 541.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#79555003)" /></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 230.000000 C 541.000000 268.000000 541.000000 288.000000 541.000000 324.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#79555003)" /></g><mask id="79555003" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1286" height="604">
+]]></script><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="1082.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="1082.000000" height="92.000000" class="class_header fill-N1" /><text x="541.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" x2="1082.000000" y1="92.000000" y2="92.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="table"><g class="shape" ><rect x="351.000000" y="192.000000" width="381.000000" height="36.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="192.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="361.000000" y="217.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect x="351.000000" y="328.000000" width="381.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="328.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="361.000000" y="353.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text><text x="361.000000" y="387.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">ok</text><text x="402.000000" y="387.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="712.000000" y="387.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="351.000000" x2="732.000000" y1="400.000000" y2="400.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 541.000000 94.000000 C 541.000000 132.000000 541.000000 152.000000 541.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#79555003)" /></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 230.000000 C 541.000000 268.000000 541.000000 288.000000 541.000000 324.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#79555003)" /></g><mask id="79555003" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1286" height="604">
 <rect x="-102" y="-102" width="1286" height="604" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1286" height="544" viewBox="-90 -90 1286 544"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1286" height="544" viewBox="-90 -90 1286 544"><rect x="-90.000000" y="-90.000000" width="1286.000000" height="544.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -44,7 +44,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="1286.000000" height="544.000000" class=" fill-N7" /><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="1082.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="1082.000000" height="92.000000" class="class_header fill-N1" /><text x="553.000000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" x2="1094.000000" y1="104.000000" y2="104.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="table"><g class="shape" ><rect x="362.000000" y="174.000000" width="381.000000" height="36.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="362.000000" y="174.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="372.000000" y="199.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect x="362.000000" y="280.000000" width="381.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="362.000000" y="280.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="372.000000" y="305.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text><text x="372.000000" y="339.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">ok</text><text x="413.000000" y="339.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="723.000000" y="339.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="362.000000" x2="743.000000" y1="352.000000" y2="352.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 553.000000 106.000000 L 553.000000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3719347756)" /></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 212.000000 L 553.000000 276.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3719347756)" /></g><mask id="3719347756" maskUnits="userSpaceOnUse" x="-90" y="-90" width="1286" height="544">
+]]></script><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="1082.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="1082.000000" height="92.000000" class="class_header fill-N1" /><text x="553.000000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" x2="1094.000000" y1="104.000000" y2="104.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="table"><g class="shape" ><rect x="362.000000" y="174.000000" width="381.000000" height="36.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="362.000000" y="174.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="372.000000" y="199.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect x="362.000000" y="280.000000" width="381.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="362.000000" y="280.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="372.000000" y="305.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text><text x="372.000000" y="339.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">ok</text><text x="413.000000" y="339.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="723.000000" y="339.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="362.000000" x2="743.000000" y1="352.000000" y2="352.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 553.000000 106.000000 L 553.000000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3719347756)" /></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 212.000000 L 553.000000 276.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3719347756)" /></g><mask id="3719347756" maskUnits="userSpaceOnUse" x="-90" y="-90" width="1286" height="544">
 <rect x="-90" y="-90" width="1286" height="544" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="754" height="473" viewBox="-100 -102 754 473"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="754" height="473" viewBox="-100 -102 754 473"><rect x="-100.000000" y="-102.000000" width="754.000000" height="473.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -793,7 +793,7 @@
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><rect x="-100.000000" y="-102.000000" width="754.000000" height="473.000000" class=" fill-N7" /><g id="x" style='opacity:0.400000'><g class="shape" ><rect x="135.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="38.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="248.000000" y="21.000000" width="304" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>linux: because a PC is a terrible thing to waste</p>
+</style><g id="x" style='opacity:0.400000'><g class="shape" ><rect x="135.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="38.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="248.000000" y="21.000000" width="304" 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="135.000000" y="203.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="241.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 161.000000 68.000000 C 161.000000 120.800000 161.000000 148.300000 161.000000 199.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4082817813)" /><text x="161.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="161.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="161.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="4082817813" maskUnits="userSpaceOnUse" x="-100" y="-102" width="754" height="473">
 <rect x="-100" y="-102" width="754" height="473" fill="white"></rect>
 <rect x="0.000000" y="116.000000" width="322" height="37" fill="black"></rect>
--- a/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="713" height="513" viewBox="-88 -90 713 513"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="713" height="513" viewBox="-88 -90 713 513"><rect x="-88.000000" y="-90.000000" width="713.000000" height="513.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -793,7 +793,7 @@
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><rect x="-88.000000" y="-90.000000" width="713.000000" height="513.000000" class=" fill-N7" /><g id="x" style='opacity:0.400000'><g class="shape" ><rect x="146.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">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="219.000000" y="33.000000" width="304" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>linux: because a PC is a terrible thing to waste</p>
+</style><g id="x" style='opacity:0.400000'><g class="shape" ><rect x="146.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">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="219.000000" y="33.000000" width="304" 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="146.000000" y="255.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="293.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 173.000000 80.000000 L 173.000000 251.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2191417488)" /><text x="173.000000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="173.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="173.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="2191417488" maskUnits="userSpaceOnUse" x="-88" y="-90" width="713" height="513">
 <rect x="-88" y="-90" width="713" height="513" fill="white"></rect>
 <rect x="12.000000" y="148.000000" width="322" height="37" fill="black"></rect>
--- a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1425" height="655" viewBox="-102 -100 1425 655"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1425" height="655" viewBox="-102 -100 1425 655"><rect x="-102.000000" y="-100.000000" width="1425.000000" height="655.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -51,7 +51,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-100.000000" width="1425.000000" height="655.000000" class=" fill-N7" /><g id="k8s"><g class="shape" ><rect x="0.000000" y="41.000000" width="1221.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="610.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0.000000" y="328.000000" width="395.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="197.500000" y="315.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="86.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="152.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="278.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="344.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="470.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="536.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="662.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="728.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="855.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="921.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1048.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1114.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="131.000000" y="357.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="169.000000" y="395.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="279.000000" y="357.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="317.000000" y="395.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 168.000000 C 59.000000 214.400000 59.000000 246.900000 59.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3019279932)" /><text x="59.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 141.000000 168.000000 C 141.000000 214.400000 141.000000 246.900000 141.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3019279932)" /><text x="141.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 217.000000 168.000000 C 217.000000 214.400000 217.000000 246.900000 217.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3019279932)" /><text x="217.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 278.000000 168.000000 C 278.000000 214.400000 278.000000 246.900000 278.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3019279932)" /><text x="278.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">vault</text></g><mask id="3019279932" maskUnits="userSpaceOnUse" x="-102" y="-100" width="1425" height="655">
+]]></script><g id="k8s"><g class="shape" ><rect x="0.000000" y="41.000000" width="1221.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="610.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0.000000" y="328.000000" width="395.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="197.500000" y="315.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="86.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="152.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="278.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="344.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="470.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="536.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="662.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="728.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="855.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="921.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1048.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1114.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="131.000000" y="357.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="169.000000" y="395.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="279.000000" y="357.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="317.000000" y="395.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 168.000000 C 59.000000 214.400000 59.000000 246.900000 59.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3019279932)" /><text x="59.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 141.000000 168.000000 C 141.000000 214.400000 141.000000 246.900000 141.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3019279932)" /><text x="141.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 217.000000 168.000000 C 217.000000 214.400000 217.000000 246.900000 217.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3019279932)" /><text x="217.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 278.000000 168.000000 C 278.000000 214.400000 278.000000 246.900000 278.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3019279932)" /><text x="278.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">vault</text></g><mask id="3019279932" maskUnits="userSpaceOnUse" x="-102" y="-100" width="1425" height="655">
 <rect x="-102" y="-100" width="1425" height="655" fill="white"></rect>
 <rect x="30.000000" y="237.000000" width="59" height="21" fill="black"></rect>
 <rect x="109.000000" y="237.000000" width="65" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="322" viewBox="-102 -102 360 322"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="322" viewBox="-102 -102 360 322"><rect x="-102.000000" y="-102.000000" width="360.000000" height="322.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="360.000000" height="322.000000" class=" fill-N7" /><g id="my network"><g class="shape" ><rect x="0.000000" y="0.000000" width="156.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="48.500000" y="29.500000" width="59" height="59" /><text x="78.000000" y="21.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">my network</text></g><mask id="722444197" maskUnits="userSpaceOnUse" x="-102" y="-102" width="360" height="322">
+]]></script><g id="my network"><g class="shape" ><rect x="0.000000" y="0.000000" width="156.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="48.500000" y="29.500000" width="59" height="59" /><text x="78.000000" y="21.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">my network</text></g><mask id="722444197" maskUnits="userSpaceOnUse" x="-102" y="-102" width="360" height="322">
 <rect x="-102" y="-102" width="360" height="322" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="322" viewBox="-90 -90 360 322"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="322" viewBox="-90 -90 360 322"><rect x="-90.000000" y="-90.000000" width="360.000000" height="322.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="360.000000" height="322.000000" class=" fill-N7" /><g id="my network"><g class="shape" ><rect x="12.000000" y="12.000000" width="156.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="60.500000" y="41.500000" width="59" height="59" /><text x="90.000000" y="33.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">my network</text></g><mask id="2778741965" maskUnits="userSpaceOnUse" x="-90" y="-90" width="360" height="322">
+]]></script><g id="my network"><g class="shape" ><rect x="12.000000" y="12.000000" width="156.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="60.500000" y="41.500000" width="59" height="59" /><text x="90.000000" y="33.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">my network</text></g><mask id="2778741965" maskUnits="userSpaceOnUse" x="-90" y="-90" width="360" height="322">
 <rect x="-90" y="-90" width="360" height="322" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/sequence-note-escape-group/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence-note-escape-group/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="633" height="602" viewBox="-234 -50 633 602"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="633" height="602" viewBox="-234 -50 633 602"><rect x="-234.000000" y="-50.000000" width="633.000000" height="602.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-234.000000" y="-50.000000" width="633.000000" height="602.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="197.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="247.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="(b -- )[0]"><path d="M 247.000000 120.000000 L 247.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="&#34;04:20,11:20&#34;"><g class="shape blend" ><rect x="-134.000000" y="161.000000" width="433.000000" height="248.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-129.000000" y="166.000000" width="76.000000" height="21.000000" class=" fill-N5" /><text x="-91.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">04:20,11:20</text></g><g id="&#34;04:20,11:20&#34;.loop through each table"><g class="shape blend" ><rect x="-122.000000" y="202.000000" width="409.000000" height="195.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-117.000000" y="207.000000" width="160.000000" height="21.000000" class=" fill-N5" /><text x="-37.000000" y="223.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">loop through each table</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 382.000000 L 243.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#751485896)" /></g><g id="a.&#34;start_time = datetime.datetime.now&#34;"><g class="shape" ><path d="M -82 246 H 186 C 187 246 188 246 189 247 L 206 263 C 207 264 207 265 207 266 V 312 C 207 312 207 312 207 312 H -82 C -82 312 -82 312 -82 312 V 247 C -82 246 -82 246 -82 246 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 206 312 H -81 C -82 312 -82 312 -82 311 V 247 C -82 246 -82 246 -81 246 H 185 C 186 246 186 246 186 247 V 264 C 186 265 187 266 188 266 H 206 C 207 266 207 266 207 267 V 311 C 206 312 207 312 206 312 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="284.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">start_time = datetime.datetime.now</text></g><mask id="751485896" maskUnits="userSpaceOnUse" x="-234" y="-50" width="633" height="602">
+]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="197.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="247.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="(b -- )[0]"><path d="M 247.000000 120.000000 L 247.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="&#34;04:20,11:20&#34;"><g class="shape blend" ><rect x="-134.000000" y="161.000000" width="433.000000" height="248.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-129.000000" y="166.000000" width="76.000000" height="21.000000" class=" fill-N5" /><text x="-91.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">04:20,11:20</text></g><g id="&#34;04:20,11:20&#34;.loop through each table"><g class="shape blend" ><rect x="-122.000000" y="202.000000" width="409.000000" height="195.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-117.000000" y="207.000000" width="160.000000" height="21.000000" class=" fill-N5" /><text x="-37.000000" y="223.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">loop through each table</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 382.000000 L 243.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#751485896)" /></g><g id="a.&#34;start_time = datetime.datetime.now&#34;"><g class="shape" ><path d="M -82 246 H 186 C 187 246 188 246 189 247 L 206 263 C 207 264 207 265 207 266 V 312 C 207 312 207 312 207 312 H -82 C -82 312 -82 312 -82 312 V 247 C -82 246 -82 246 -82 246 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 206 312 H -81 C -82 312 -82 312 -82 311 V 247 C -82 246 -82 246 -81 246 H 185 C 186 246 186 246 186 247 V 264 C 186 265 187 266 188 266 H 206 C 207 266 207 266 207 267 V 311 C 206 312 207 312 206 312 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="284.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">start_time = datetime.datetime.now</text></g><mask id="751485896" maskUnits="userSpaceOnUse" x="-234" y="-50" width="633" height="602">
 <rect x="-234" y="-50" width="633" height="602" fill="white"></rect>
 <rect x="-129.000000" y="166.000000" width="76" height="16" fill="black"></rect>
 <rect x="-117.000000" y="207.000000" width="160" height="16" fill="black"></rect>
--- a/e2etests/testdata/regression/sequence-note-escape-group/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence-note-escape-group/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="633" height="602" viewBox="-234 -50 633 602"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="633" height="602" viewBox="-234 -50 633 602"><rect x="-234.000000" y="-50.000000" width="633.000000" height="602.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-234.000000" y="-50.000000" width="633.000000" height="602.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="197.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="247.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="(b -- )[0]"><path d="M 247.000000 120.000000 L 247.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="&#34;04:20,11:20&#34;"><g class="shape blend" ><rect x="-134.000000" y="161.000000" width="433.000000" height="248.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-129.000000" y="166.000000" width="76.000000" height="21.000000" class=" fill-N5" /><text x="-91.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">04:20,11:20</text></g><g id="&#34;04:20,11:20&#34;.loop through each table"><g class="shape blend" ><rect x="-122.000000" y="202.000000" width="409.000000" height="195.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-117.000000" y="207.000000" width="160.000000" height="21.000000" class=" fill-N5" /><text x="-37.000000" y="223.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">loop through each table</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 382.000000 L 243.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#751485896)" /></g><g id="a.&#34;start_time = datetime.datetime.now&#34;"><g class="shape" ><path d="M -82 246 H 186 C 187 246 188 246 189 247 L 206 263 C 207 264 207 265 207 266 V 312 C 207 312 207 312 207 312 H -82 C -82 312 -82 312 -82 312 V 247 C -82 246 -82 246 -82 246 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 206 312 H -81 C -82 312 -82 312 -82 311 V 247 C -82 246 -82 246 -81 246 H 185 C 186 246 186 246 186 247 V 264 C 186 265 187 266 188 266 H 206 C 207 266 207 266 207 267 V 311 C 206 312 207 312 206 312 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="284.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">start_time = datetime.datetime.now</text></g><mask id="751485896" maskUnits="userSpaceOnUse" x="-234" y="-50" width="633" height="602">
+]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="197.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="247.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="(b -- )[0]"><path d="M 247.000000 120.000000 L 247.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="&#34;04:20,11:20&#34;"><g class="shape blend" ><rect x="-134.000000" y="161.000000" width="433.000000" height="248.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-129.000000" y="166.000000" width="76.000000" height="21.000000" class=" fill-N5" /><text x="-91.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">04:20,11:20</text></g><g id="&#34;04:20,11:20&#34;.loop through each table"><g class="shape blend" ><rect x="-122.000000" y="202.000000" width="409.000000" height="195.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-117.000000" y="207.000000" width="160.000000" height="21.000000" class=" fill-N5" /><text x="-37.000000" y="223.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">loop through each table</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 382.000000 L 243.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#751485896)" /></g><g id="a.&#34;start_time = datetime.datetime.now&#34;"><g class="shape" ><path d="M -82 246 H 186 C 187 246 188 246 189 247 L 206 263 C 207 264 207 265 207 266 V 312 C 207 312 207 312 207 312 H -82 C -82 312 -82 312 -82 312 V 247 C -82 246 -82 246 -82 246 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 206 312 H -81 C -82 312 -82 312 -82 311 V 247 C -82 246 -82 246 -81 246 H 185 C 186 246 186 246 186 247 V 264 C 186 265 187 266 188 266 H 206 C 207 266 207 266 207 267 V 311 C 206 312 207 312 206 312 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="284.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">start_time = datetime.datetime.now</text></g><mask id="751485896" maskUnits="userSpaceOnUse" x="-234" y="-50" width="633" height="602">
 <rect x="-234" y="-50" width="633" height="602" fill="white"></rect>
 <rect x="-129.000000" y="166.000000" width="76" height="16" fill="black"></rect>
 <rect x="-117.000000" y="207.000000" width="160" height="16" fill="black"></rect>
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="474" height="912" viewBox="-100 -100 474 912"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="474" height="912" viewBox="-100 -100 474 912"><rect x="-100.000000" y="-100.000000" width="474.000000" height="912.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-100.000000" y="-100.000000" width="474.000000" height="912.000000" class=" fill-N7" /><g id="foo"><g class="shape" ><rect x="0.000000" y="0.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="137.000000" y="33.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foo</text></g><g id="foobar"><g class="shape" ><rect x="0.000000" y="406.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="137.000000" y="439.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="12.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="foo.b"><g class="shape" ><rect x="162.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="foobar.c"><g class="shape" ><rect x="12.000000" y="494.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="532.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="foobar.d"><g class="shape" ><rect x="162.000000" y="494.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="532.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 137.000000 307.000000 C 137.000000 346.000000 137.000000 366.000000 137.000000 403.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><g id="(foo.a -- )[0]"><path d="M 62.000000 156.000000 L 62.000000 293.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foo.b -- )[0]"><path d="M 212.000000 156.000000 L 212.000000 293.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foobar.c -- )[0]"><path d="M 62.000000 562.000000 L 62.000000 699.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foobar.d -- )[0]"><path d="M 212.000000 562.000000 L 212.000000 699.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="foo.(a -&gt; b)[0]"><path d="M 64.000000 224.000000 L 208.000000 224.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><g id="foobar.(c -&gt; d)[0]"><path d="M 64.000000 630.000000 L 208.000000 630.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><mask id="1413854125" maskUnits="userSpaceOnUse" x="-100" y="-100" width="474" height="912">
+]]></script><g id="foo"><g class="shape" ><rect x="0.000000" y="0.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="137.000000" y="33.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foo</text></g><g id="foobar"><g class="shape" ><rect x="0.000000" y="406.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="137.000000" y="439.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="12.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="foo.b"><g class="shape" ><rect x="162.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="foobar.c"><g class="shape" ><rect x="12.000000" y="494.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="532.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="foobar.d"><g class="shape" ><rect x="162.000000" y="494.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="532.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 137.000000 307.000000 C 137.000000 346.000000 137.000000 366.000000 137.000000 403.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><g id="(foo.a -- )[0]"><path d="M 62.000000 156.000000 L 62.000000 293.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foo.b -- )[0]"><path d="M 212.000000 156.000000 L 212.000000 293.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foobar.c -- )[0]"><path d="M 62.000000 562.000000 L 62.000000 699.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foobar.d -- )[0]"><path d="M 212.000000 562.000000 L 212.000000 699.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="foo.(a -&gt; b)[0]"><path d="M 64.000000 224.000000 L 208.000000 224.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><g id="foobar.(c -&gt; d)[0]"><path d="M 64.000000 630.000000 L 208.000000 630.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><mask id="1413854125" maskUnits="userSpaceOnUse" x="-100" y="-100" width="474" height="912">
 <rect x="-100" y="-100" width="474" height="912" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="474" height="882" viewBox="-88 -88 474 882"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="474" height="882" viewBox="-88 -88 474 882"><rect x="-88.000000" y="-88.000000" width="474.000000" height="882.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-88.000000" y="-88.000000" width="474.000000" height="882.000000" class=" fill-N7" /><g id="foo"><g class="shape" ><rect x="12.000000" y="12.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="149.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foo</text></g><g id="foobar"><g class="shape" ><rect x="12.000000" y="388.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="149.000000" y="421.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="foo.b"><g class="shape" ><rect x="174.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="224.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24.000000" y="476.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="514.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="foobar.d"><g class="shape" ><rect x="174.000000" y="476.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="224.000000" y="514.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 149.000000 319.000000 L 149.000000 385.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><g id="(foo.a -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 305.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foo.b -- )[0]"><path d="M 224.000000 168.000000 L 224.000000 305.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foobar.c -- )[0]"><path d="M 74.000000 544.000000 L 74.000000 681.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foobar.d -- )[0]"><path d="M 224.000000 544.000000 L 224.000000 681.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="foo.(a -&gt; b)[0]"><path d="M 76.000000 236.000000 L 220.000000 236.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><g id="foobar.(c -&gt; d)[0]"><path d="M 76.000000 612.000000 L 220.000000 612.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><mask id="3226515924" maskUnits="userSpaceOnUse" x="-88" y="-88" width="474" height="882">
+]]></script><g id="foo"><g class="shape" ><rect x="12.000000" y="12.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="149.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foo</text></g><g id="foobar"><g class="shape" ><rect x="12.000000" y="388.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="149.000000" y="421.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="foo.b"><g class="shape" ><rect x="174.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="224.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24.000000" y="476.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="514.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="foobar.d"><g class="shape" ><rect x="174.000000" y="476.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="224.000000" y="514.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 149.000000 319.000000 L 149.000000 385.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><g id="(foo.a -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 305.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foo.b -- )[0]"><path d="M 224.000000 168.000000 L 224.000000 305.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foobar.c -- )[0]"><path d="M 74.000000 544.000000 L 74.000000 681.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foobar.d -- )[0]"><path d="M 224.000000 544.000000 L 224.000000 681.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="foo.(a -&gt; b)[0]"><path d="M 76.000000 236.000000 L 220.000000 236.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><g id="foobar.(c -&gt; d)[0]"><path d="M 76.000000 612.000000 L 220.000000 612.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><mask id="3226515924" maskUnits="userSpaceOnUse" x="-88" y="-88" width="474" height="882">
 <rect x="-88" y="-88" width="474" height="882" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="454" height="338" viewBox="-90 -50 454 338"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="454" height="338" viewBox="-90 -50 454 338"><rect x="-90.000000" y="-50.000000" width="454.000000" height="338.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-50.000000" width="454.000000" height="338.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><mask id="2677123374" maskUnits="userSpaceOnUse" x="-90" y="-50" width="454" height="338">
+]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><mask id="2677123374" maskUnits="userSpaceOnUse" x="-90" y="-50" width="454" height="338">
 <rect x="-90" y="-50" width="454" height="338" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="454" height="338" viewBox="-90 -50 454 338"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="454" height="338" viewBox="-90 -50 454 338"><rect x="-90.000000" y="-50.000000" width="454.000000" height="338.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-50.000000" width="454.000000" height="338.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><mask id="2677123374" maskUnits="userSpaceOnUse" x="-90" y="-50" width="454" height="338">
+]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><mask id="2677123374" maskUnits="userSpaceOnUse" x="-90" y="-50" width="454" height="338">
 <rect x="-90" y="-50" width="454" height="338" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="332" height="523" viewBox="-90 -50 332 523"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="332" height="523" viewBox="-90 -50 332 523"><rect x="-90.000000" y="-50.000000" width="332.000000" height="523.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-50.000000" width="332.000000" height="523.000000" class=" fill-N7" /><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#227146576)" /></g><g id="b.1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="135.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><mask id="227146576" maskUnits="userSpaceOnUse" x="-90" y="-50" width="332" height="523">
+]]></script><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#227146576)" /></g><g id="b.1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="135.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><mask id="227146576" maskUnits="userSpaceOnUse" x="-90" y="-50" width="332" height="523">
 <rect x="-90" y="-50" width="332" height="523" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="332" height="523" viewBox="-90 -50 332 523"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="332" height="523" viewBox="-90 -50 332 523"><rect x="-90.000000" y="-50.000000" width="332.000000" height="523.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-50.000000" width="332.000000" height="523.000000" class=" fill-N7" /><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#227146576)" /></g><g id="b.1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="135.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><mask id="227146576" maskUnits="userSpaceOnUse" x="-90" y="-50" width="332" height="523">
+]]></script><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#227146576)" /></g><g id="b.1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="135.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><mask id="227146576" maskUnits="userSpaceOnUse" x="-90" y="-50" width="332" height="523">
 <rect x="-90" y="-50" width="332" height="523" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1392" height="312" viewBox="-102 -102 1392 312"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1392" height="312" viewBox="-102 -102 1392 312"><rect x="-102.000000" y="-102.000000" width="1392.000000" height="312.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="1392.000000" height="312.000000" class=" fill-N7" /><g id="table"><g class="shape" ><rect x="0.000000" y="0.000000" width="534.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="534.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_overflow</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="272.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="514.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="534.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="272.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="514.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="534.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="table_constrained"><g class="shape" ><rect x="594.000000" y="0.000000" width="594.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="594.000000" y="0.000000" width="594.000000" height="36.000000" class="class_header fill-N1" /><text x="604.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_constrained_overflow</text><text x="604.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="866.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="1168.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">UNQ</text><line x1="594.000000" x2="1188.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="604.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="866.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="1168.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">FK</text><line x1="594.000000" x2="1188.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><mask id="1114961276" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1392" height="312">
+]]></script><g id="table"><g class="shape" ><rect x="0.000000" y="0.000000" width="534.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="534.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_overflow</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="272.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="514.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="534.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="272.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="514.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="534.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="table_constrained"><g class="shape" ><rect x="594.000000" y="0.000000" width="594.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="594.000000" y="0.000000" width="594.000000" height="36.000000" class="class_header fill-N1" /><text x="604.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_constrained_overflow</text><text x="604.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="866.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="1168.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">UNQ</text><line x1="594.000000" x2="1188.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="604.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="866.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="1168.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">FK</text><line x1="594.000000" x2="1188.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><mask id="1114961276" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1392" height="312">
 <rect x="-102" y="-102" width="1392" height="312" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1352" height="312" viewBox="-90 -90 1352 312"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1352" height="312" viewBox="-90 -90 1352 312"><rect x="-90.000000" y="-90.000000" width="1352.000000" height="312.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="1352.000000" height="312.000000" class=" fill-N7" /><g id="table"><g class="shape" ><rect x="12.000000" y="12.000000" width="534.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="534.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_overflow</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="284.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="526.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="546.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="284.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="526.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="546.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="table_constrained"><g class="shape" ><rect x="566.000000" y="12.000000" width="594.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="566.000000" y="12.000000" width="594.000000" height="36.000000" class="class_header fill-N1" /><text x="576.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_constrained_overflow</text><text x="576.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="838.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="1140.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">UNQ</text><line x1="566.000000" x2="1160.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="576.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="838.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="1140.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">FK</text><line x1="566.000000" x2="1160.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><mask id="2685206526" maskUnits="userSpaceOnUse" x="-90" y="-90" width="1352" height="312">
+]]></script><g id="table"><g class="shape" ><rect x="12.000000" y="12.000000" width="534.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="534.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_overflow</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="284.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="526.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="546.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="284.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="526.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="546.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="table_constrained"><g class="shape" ><rect x="566.000000" y="12.000000" width="594.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="566.000000" y="12.000000" width="594.000000" height="36.000000" class="class_header fill-N1" /><text x="576.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_constrained_overflow</text><text x="576.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="838.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="1140.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">UNQ</text><line x1="566.000000" x2="1160.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="576.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="838.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="1140.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">FK</text><line x1="566.000000" x2="1160.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><mask id="2685206526" maskUnits="userSpaceOnUse" x="-90" y="-90" width="1352" height="312">
 <rect x="-90" y="-90" width="1352" height="312" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
--- a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="370" height="436" viewBox="-102 -102 370 436"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="370" height="436" viewBox="-102 -102 370 436"><rect x="-102.000000" y="-102.000000" width="370.000000" height="436.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="370.000000" height="436.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="57.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.410707 67.653297 C 33.307229 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1453433269)" /></g><g id="(a -&gt; c)[0]"><path d="M 106.589293 67.653297 C 132.692771 106.000000 139.500000 126.000000 139.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1453433269)" /></g><mask id="1453433269" maskUnits="userSpaceOnUse" x="-102" y="-102" width="370" height="436">
+]]></script><g id="a"><g class="shape" ><rect x="57.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.410707 67.653297 C 33.307229 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1453433269)" /></g><g id="(a -&gt; c)[0]"><path d="M 106.589293 67.653297 C 132.692771 106.000000 139.500000 126.000000 139.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1453433269)" /></g><mask id="1453433269" maskUnits="userSpaceOnUse" x="-102" y="-102" width="370" height="436">
 <rect x="-102" y="-102" width="370" height="436" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="330" height="416" viewBox="-90 -90 330 416"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="330" height="416" viewBox="-90 -90 330 416"><rect x="-90.000000" y="-90.000000" width="330.000000" height="416.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="330.000000" height="416.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="20.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="46.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1903041909)" /></g><g id="(a -&gt; c)[0]"><path d="M 56.166667 80.000000 L 56.166667 108.000000 S 56.166667 118.000000 66.166667 118.000000 L 101.500000 118.000000 S 111.500000 118.000000 111.500000 128.000000 L 111.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1903041909)" /></g><mask id="1903041909" maskUnits="userSpaceOnUse" x="-90" y="-90" width="330" height="416">
+]]></script><g id="a"><g class="shape" ><rect x="20.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="46.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1903041909)" /></g><g id="(a -&gt; c)[0]"><path d="M 56.166667 80.000000 L 56.166667 108.000000 S 56.166667 118.000000 66.166667 118.000000 L 101.500000 118.000000 S 111.500000 118.000000 111.500000 128.000000 L 111.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1903041909)" /></g><mask id="1903041909" maskUnits="userSpaceOnUse" x="-90" y="-90" width="330" height="416">
 <rect x="-90" y="-90" width="330" height="416" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="257" height="436" viewBox="-102 -102 257 436"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="257" height="436" viewBox="-102 -102 257 436"><rect x="-102.000000" y="-102.000000" width="257.000000" height="436.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="257.000000" height="436.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4219960005)" /></g><mask id="4219960005" maskUnits="userSpaceOnUse" x="-102" y="-102" width="257" height="436">
+]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4219960005)" /></g><mask id="4219960005" maskUnits="userSpaceOnUse" x="-102" y="-102" width="257" height="436">
 <rect x="-102" y="-102" width="257" height="436" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="257" height="406" viewBox="-90 -90 257 406"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="257" height="406" viewBox="-90 -90 257 406"><rect x="-90.000000" y="-90.000000" width="257.000000" height="406.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@ -37,7 +37,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="257.000000" height="406.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4208391940)" /></g><mask id="4208391940" maskUnits="userSpaceOnUse" x="-90" y="-90" width="257" height="406">
+]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4208391940)" /></g><mask id="4208391940" maskUnits="userSpaceOnUse" x="-90" y="-90" width="257" height="406">
 <rect x="-90" y="-90" width="257" height="406" fill="white"></rect>

 </mask></svg>
--- a/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="338" height="634" viewBox="-102 -100 338 634"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="338" height="634" viewBox="-102 -100 338 634"><rect x="-102.000000" y="-100.000000" width="338.000000" height="634.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@ -44,7 +44,7 @@
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><rect x="-102.000000" y="-100.000000" width="338.000000" height="634.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="1.000000" y="41.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="67.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="0.000000" y="307.000000" width="134.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="67.000000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="a.b"><g class="shape" ><rect x="41.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="67.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="40.000000" y="336.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="67.000000" y="374.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.000000 138.500000 C 67.000000 160.100000 67.000000 176.000000 67.000000 191.000000 C 67.000000 206.000000 67.000000 280.100000 67.000000 332.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#854360138)" /></g><mask id="854360138" maskUnits="userSpaceOnUse" x="-102" y="-100" width="338" height="634">
+]]></script><g id="a"><g class="shape" ><rect x="1.000000" y="41.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="67.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="0.000000" y="307.000000" width="134.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="67.000000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="a.b"><g class="shape" ><rect x="41.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="67.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="40.000000" y="336.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="67.000000" y="374.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.000000 138.500000 C 67.000000 160.100000 67.000000 176.000000 67.000000 191.000000 C 67.000000 206.000000 67.000000 280.100000 67.000000 332.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#854360138)" /></g><mask id="854360138" maskUnits="userSpaceOnUse" x="-102" y="-100" width="338" height="634">
 <rect x="-102" y="-100" width="338" height="634" fill="white"></rect>

 </mask></svg>
--- a/Show more
+++ b/Show more