Merge pull request #1016 from alixander/isolate-css

Isolate css

ci/release/changelogs/next.md

@@ -1,10 +1,12 @@
 #### Features 🚀
-- `border-radius` is now supported on both shape class and sql_table. [#982](https://github.com/terrastruct/d2/pull/982)
+
+- `border-radius` is supported for both `class` and `sql_table` shapes. [#982](https://github.com/terrastruct/d2/pull/982)
 
 #### Improvements 🧹
 
 - `dagre` layouts that have a connection where one endpoint is a container is much improved. [#1011](https://github.com/terrastruct/d2/pull/1011)
 - `sketch` draws connections with less roughness, which especially improves look of corner bends in ELK. [#1014](https://github.com/terrastruct/d2/pull/1014)
+- CSS in SVGs are diagram-specific, which means you can embed multiple D2 diagrams on a web page without fear of style conflicts. [#1016](https://github.com/terrastruct/d2/pull/1016)
 
 #### Bugfixes ⛑️
 

d2renderers/d2svg/d2svg.go

@@ -1353,7 +1353,7 @@ func RenderText(text string, x, height float64) string {
 	return strings.Join(rendered, "")
 }
 
-func embedFonts(buf *bytes.Buffer, source string, fontFamily *d2fonts.FontFamily) {
+func embedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fonts.FontFamily) {
 	fmt.Fprint(buf, `<style type="text/css"><![CDATA[`)
 
 	appendOnTrigger(
@@ -1365,13 +1365,16 @@ func embedFonts(buf *bytes.Buffer, source string, fontFamily *d2fonts.FontFamily
 			`class="md"`,
 		},
 		fmt.Sprintf(`
-.text {
-	font-family: "font-regular";
+.%s .text {
+	font-family: "%s-font-regular";
 }
 @font-face {
-	font-family: font-regular;
+	font-family: %s-font-regular;
 	src: url("%s");
 }`,
+			diagramHash,
+			diagramHash,
+			diagramHash,
 			d2fonts.FontEncodings[fontFamily.Font(0, d2fonts.FONT_STYLE_REGULAR)],
 		),
 	)
@@ -1424,13 +1427,16 @@ func embedFonts(buf *bytes.Buffer, source string, fontFamily *d2fonts.FontFamily
 			`<strong>`,
 		},
 		fmt.Sprintf(`
-.text-bold {
-	font-family: "font-bold";
+.%s .text-bold {
+	font-family: "%s-font-bold";
 }
 @font-face {
-	font-family: font-bold;
+	font-family: %s-font-bold;
 	src: url("%s");
 }`,
+			diagramHash,
+			diagramHash,
+			diagramHash,
 			d2fonts.FontEncodings[fontFamily.Font(0, d2fonts.FONT_STYLE_BOLD)],
 		),
 	)
@@ -1444,13 +1450,16 @@ func embedFonts(buf *bytes.Buffer, source string, fontFamily *d2fonts.FontFamily
 			`<dfn>`,
 		},
 		fmt.Sprintf(`
-.text-italic {
-	font-family: "font-italic";
+.%s .text-italic {
+	font-family: "%s-font-italic";
 }
 @font-face {
-	font-family: font-italic;
+	font-family: %s-font-italic;
 	src: url("%s");
 }`,
+			diagramHash,
+			diagramHash,
+			diagramHash,
 			d2fonts.FontEncodings[fontFamily.Font(0, d2fonts.FONT_STYLE_ITALIC)],
 		),
 	)
@@ -1466,13 +1475,16 @@ func embedFonts(buf *bytes.Buffer, source string, fontFamily *d2fonts.FontFamily
 			`<samp>`,
 		},
 		fmt.Sprintf(`
-.text-mono {
-	font-family: "font-mono";
+.%s .text-mono {
+	font-family: "%s-font-mono";
 }
 @font-face {
-	font-family: font-mono;
+	font-family: %s-font-mono;
 	src: url("%s");
 }`,
+			diagramHash,
+			diagramHash,
+			diagramHash,
 			d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_REGULAR)],
 		),
 	)
@@ -1484,13 +1496,16 @@ func embedFonts(buf *bytes.Buffer, source string, fontFamily *d2fonts.FontFamily
 			`class="text-mono-bold"`,
 		},
 		fmt.Sprintf(`
-.text-mono-bold {
-	font-family: "font-mono-bold";
+.%s .text-mono-bold {
+	font-family: "%s-font-mono-bold";
 }
 @font-face {
-	font-family: font-mono-bold;
+	font-family: %s-font-mono-bold;
 	src: url("%s");
 }`,
+			diagramHash,
+			diagramHash,
+			diagramHash,
 			d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_BOLD)],
 		),
 	)
@@ -1502,49 +1517,16 @@ func embedFonts(buf *bytes.Buffer, source string, fontFamily *d2fonts.FontFamily
 			`class="text-mono-italic"`,
 		},
 		fmt.Sprintf(`
-.text-mono-italic {
-	font-family: "font-mono-italic";
+.%s .text-mono-italic {
+	font-family: "%s-font-mono-italic";
 }
 @font-face {
-	font-family: font-mono-italic;
-	src: url("%s");
-}`,
-			d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_ITALIC)],
-		),
-	)
-
-	appendOnTrigger(
-		buf,
-		source,
-		[]string{
-			`class="text-mono-bold"`,
-		},
-		fmt.Sprintf(`
-.text-mono-bold {
-	font-family: "font-mono-bold";
-}
-@font-face {
-	font-family: font-mono-bold;
-	src: url("%s");
-}`,
-			d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_BOLD)],
-		),
-	)
-
-	appendOnTrigger(
-		buf,
-		source,
-		[]string{
-			`class="text-mono-italic"`,
-		},
-		fmt.Sprintf(`
-.text-mono-italic {
-	font-family: "font-mono-italic";
-}
-@font-face {
-	font-family: font-mono-italic;
+	font-family: %s-font-mono-italic;
 	src: url("%s");
 }`,
+			diagramHash,
+			diagramHash,
+			diagramHash,
 			d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_ITALIC)],
 		),
 	)
@@ -1649,10 +1631,12 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 
 	// Mask URLs are global. So when multiple SVGs attach to a DOM, they share
 	// the same namespace for mask URLs.
-	labelMaskID, err := diagram.HashID()
+	diagramHash, err := diagram.HashID()
 	if err != nil {
 		return nil, err
 	}
+	// CSS names can't start with numbers, so prepend a little something
+	diagramHash = "d2-" + diagramHash
 
 	// SVG has no notion of z-index. The z-index is effectively the order it's drawn.
 	// So draw from the least nested to most nested
@@ -1672,7 +1656,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	markers := map[string]struct{}{}
 	for _, obj := range allObjects {
 		if c, is := obj.(d2target.Connection); is {
-			labelMask, err := drawConnection(buf, labelMaskID, c, markers, idToShape, sketchRunner)
+			labelMask, err := drawConnection(buf, diagramHash, c, markers, idToShape, sketchRunner)
 			if err != nil {
 				return nil, err
 			}
@@ -1680,7 +1664,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 				labelMasks = append(labelMasks, labelMask)
 			}
 		} else if s, is := obj.(d2target.Shape); is {
-			labelMask, err := drawShape(buf, labelMaskID, s, sketchRunner)
+			labelMask, err := drawShape(buf, diagramHash, s, sketchRunner)
 			if err != nil {
 				return nil, err
 			} else if labelMask != "" {
@@ -1695,7 +1679,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	left, top, w, h := dimensions(diagram, pad)
 	fmt.Fprint(buf, strings.Join([]string{
 		fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="%d" y="%d" width="%d" height="%d">`,
-			labelMaskID, left, top, w, h,
+			diagramHash, left, top, w, h,
 		),
 		fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" fill="white"></rect>`,
 			left, top, w, h,
@@ -1706,8 +1690,8 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 
 	// generate style elements that will be appended to the SVG tag
 	upperBuf := &bytes.Buffer{}
-	embedFonts(upperBuf, buf.String(), diagram.FontFamily) // embedFonts *must* run before `d2sketch.DefineFillPatterns`, but after all elements are appended to `buf`
-	themeStylesheet, err := themeCSS(themeID, darkThemeID)
+	embedFonts(upperBuf, diagramHash, buf.String(), diagram.FontFamily) // embedFonts *must* run before `d2sketch.DefineFillPatterns`, but after all elements are appended to `buf`
+	themeStylesheet, err := themeCSS(diagramHash, themeID, darkThemeID)
 	if err != nil {
 		return nil, err
 	}
@@ -1721,7 +1705,12 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 		}
 	}
 	if hasMarkdown {
-		fmt.Fprintf(upperBuf, `<style type="text/css">%s</style>`, mdCSS)
+		css := mdCSS
+		css = strings.ReplaceAll(css, "font-italic", fmt.Sprintf("%s-font-italic", diagramHash))
+		css = strings.ReplaceAll(css, "font-bold", fmt.Sprintf("%s-font-bold", diagramHash))
+		css = strings.ReplaceAll(css, "font-mono", fmt.Sprintf("%s-font-mono", diagramHash))
+		css = strings.ReplaceAll(css, "font-regular", fmt.Sprintf("%s-font-regular", diagramHash))
+		fmt.Fprintf(upperBuf, `<style type="text/css">%s</style>`, css)
 	}
 	if sketchRunner != nil {
 		d2sketch.DefineFillPatterns(upperBuf)
@@ -1790,9 +1779,10 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	)
 
 	// TODO minify
-	docRendered := fmt.Sprintf(`%s%s<svg id="d2-svg" width="%d" height="%d" viewBox="%d %d %d %d">%s%s%s%s</svg></svg>`,
+	docRendered := fmt.Sprintf(`%s%s<svg id="d2-svg" class="%s" width="%d" height="%d" viewBox="%d %d %d %d">%s%s%s%s</svg></svg>`,
 		`<?xml version="1.0" encoding="utf-8"?>`,
 		fitToScreenWrapper,
+		diagramHash,
 		w, h, left, top, w, h,
 		doubleBorderElStr,
 		backgroundEl.Render(),
@@ -1803,14 +1793,14 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 }
 
 // TODO include only colors that are being used to reduce size
-func themeCSS(themeID int64, darkThemeID *int64) (stylesheet string, err error) {
-	out, err := singleThemeRulesets(themeID)
+func themeCSS(diagramHash string, themeID int64, darkThemeID *int64) (stylesheet string, err error) {
+	out, err := singleThemeRulesets(diagramHash, themeID)
 	if err != nil {
 		return "", err
 	}
 
 	if darkThemeID != nil {
-		darkOut, err := singleThemeRulesets(*darkThemeID)
+		darkOut, err := singleThemeRulesets(diagramHash, *darkThemeID)
 		if err != nil {
 			return "", err
 		}
@@ -1820,30 +1810,66 @@ func themeCSS(themeID int64, darkThemeID *int64) (stylesheet string, err error)
 	return out, nil
 }
 
-func singleThemeRulesets(themeID int64) (rulesets string, err error) {
+func singleThemeRulesets(diagramHash string, themeID int64) (rulesets string, err error) {
 	out := ""
 	theme := d2themescatalog.Find(themeID)
 
 	// Global theme colors
 	for _, property := range []string{"fill", "stroke", "background-color", "color"} {
-		out += fmt.Sprintf(".%s-N1{%s:%s;}.%s-N2{%s:%s;}.%s-N3{%s:%s;}.%s-N4{%s:%s;}.%s-N5{%s:%s;}.%s-N6{%s:%s;}.%s-N7{%s:%s;}.%s-B1{%s:%s;}.%s-B2{%s:%s;}.%s-B3{%s:%s;}.%s-B4{%s:%s;}.%s-B5{%s:%s;}.%s-B6{%s:%s;}.%s-AA2{%s:%s;}.%s-AA4{%s:%s;}.%s-AA5{%s:%s;}.%s-AB4{%s:%s;}.%s-AB5{%s:%s;}",
+		out += fmt.Sprintf(`
+		.%s .%s-N1{%s:%s;}
+		.%s .%s-N2{%s:%s;}
+		.%s .%s-N3{%s:%s;}
+		.%s .%s-N4{%s:%s;}
+		.%s .%s-N5{%s:%s;}
+		.%s .%s-N6{%s:%s;}
+		.%s .%s-N7{%s:%s;}
+		.%s .%s-B1{%s:%s;}
+		.%s .%s-B2{%s:%s;}
+		.%s .%s-B3{%s:%s;}
+		.%s .%s-B4{%s:%s;}
+		.%s .%s-B5{%s:%s;}
+		.%s .%s-B6{%s:%s;}
+		.%s .%s-AA2{%s:%s;}
+		.%s .%s-AA4{%s:%s;}
+		.%s .%s-AA5{%s:%s;}
+		.%s .%s-AB4{%s:%s;}
+		.%s .%s-AB5{%s:%s;}`,
+			diagramHash,
 			property, property, theme.Colors.Neutrals.N1,
+			diagramHash,
 			property, property, theme.Colors.Neutrals.N2,
+			diagramHash,
 			property, property, theme.Colors.Neutrals.N3,
+			diagramHash,
 			property, property, theme.Colors.Neutrals.N4,
+			diagramHash,
 			property, property, theme.Colors.Neutrals.N5,
+			diagramHash,
 			property, property, theme.Colors.Neutrals.N6,
+			diagramHash,
 			property, property, theme.Colors.Neutrals.N7,
+			diagramHash,
 			property, property, theme.Colors.B1,
+			diagramHash,
 			property, property, theme.Colors.B2,
+			diagramHash,
 			property, property, theme.Colors.B3,
+			diagramHash,
 			property, property, theme.Colors.B4,
+			diagramHash,
 			property, property, theme.Colors.B5,
+			diagramHash,
 			property, property, theme.Colors.B6,
+			diagramHash,
 			property, property, theme.Colors.AA2,
+			diagramHash,
 			property, property, theme.Colors.AA4,
+			diagramHash,
 			property, property, theme.Colors.AA5,
+			diagramHash,
 			property, property, theme.Colors.AB4,
+			diagramHash,
 			property, property, theme.Colors.AB5,
 		)
 	}

e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 114 46"><svg id="d2-svg" width="114" height="46" viewBox="-1 -1 114 46"><rect x="-1.000000" y="-1.000000" width="114.000000" height="46.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 114 46"><svg id="d2-svg" class="d2-148127623" width="114" height="46" viewBox="-1 -1 114 46"><rect x="-1.000000" y="-1.000000" width="114.000000" height="46.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,7 +10,79 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="a"><g class="shape" ><rect x="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="-1" y="-1" width="114" height="46">
+
+		.d2-148127623 .fill-N1{fill:#0A0F25;}
+		.d2-148127623 .fill-N2{fill:#676C7E;}
+		.d2-148127623 .fill-N3{fill:#9499AB;}
+		.d2-148127623 .fill-N4{fill:#CFD2DD;}
+		.d2-148127623 .fill-N5{fill:#DEE1EB;}
+		.d2-148127623 .fill-N6{fill:#EEF1F8;}
+		.d2-148127623 .fill-N7{fill:#FFFFFF;}
+		.d2-148127623 .fill-B1{fill:#0D32B2;}
+		.d2-148127623 .fill-B2{fill:#0D32B2;}
+		.d2-148127623 .fill-B3{fill:#E3E9FD;}
+		.d2-148127623 .fill-B4{fill:#E3E9FD;}
+		.d2-148127623 .fill-B5{fill:#EDF0FD;}
+		.d2-148127623 .fill-B6{fill:#F7F8FE;}
+		.d2-148127623 .fill-AA2{fill:#4A6FF3;}
+		.d2-148127623 .fill-AA4{fill:#EDF0FD;}
+		.d2-148127623 .fill-AA5{fill:#F7F8FE;}
+		.d2-148127623 .fill-AB4{fill:#EDF0FD;}
+		.d2-148127623 .fill-AB5{fill:#F7F8FE;}
+		.d2-148127623 .stroke-N1{stroke:#0A0F25;}
+		.d2-148127623 .stroke-N2{stroke:#676C7E;}
+		.d2-148127623 .stroke-N3{stroke:#9499AB;}
+		.d2-148127623 .stroke-N4{stroke:#CFD2DD;}
+		.d2-148127623 .stroke-N5{stroke:#DEE1EB;}
+		.d2-148127623 .stroke-N6{stroke:#EEF1F8;}
+		.d2-148127623 .stroke-N7{stroke:#FFFFFF;}
+		.d2-148127623 .stroke-B1{stroke:#0D32B2;}
+		.d2-148127623 .stroke-B2{stroke:#0D32B2;}
+		.d2-148127623 .stroke-B3{stroke:#E3E9FD;}
+		.d2-148127623 .stroke-B4{stroke:#E3E9FD;}
+		.d2-148127623 .stroke-B5{stroke:#EDF0FD;}
+		.d2-148127623 .stroke-B6{stroke:#F7F8FE;}
+		.d2-148127623 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-148127623 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-148127623 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-148127623 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-148127623 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-148127623 .background-color-N1{background-color:#0A0F25;}
+		.d2-148127623 .background-color-N2{background-color:#676C7E;}
+		.d2-148127623 .background-color-N3{background-color:#9499AB;}
+		.d2-148127623 .background-color-N4{background-color:#CFD2DD;}
+		.d2-148127623 .background-color-N5{background-color:#DEE1EB;}
+		.d2-148127623 .background-color-N6{background-color:#EEF1F8;}
+		.d2-148127623 .background-color-N7{background-color:#FFFFFF;}
+		.d2-148127623 .background-color-B1{background-color:#0D32B2;}
+		.d2-148127623 .background-color-B2{background-color:#0D32B2;}
+		.d2-148127623 .background-color-B3{background-color:#E3E9FD;}
+		.d2-148127623 .background-color-B4{background-color:#E3E9FD;}
+		.d2-148127623 .background-color-B5{background-color:#EDF0FD;}
+		.d2-148127623 .background-color-B6{background-color:#F7F8FE;}
+		.d2-148127623 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-148127623 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-148127623 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-148127623 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-148127623 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-148127623 .color-N1{color:#0A0F25;}
+		.d2-148127623 .color-N2{color:#676C7E;}
+		.d2-148127623 .color-N3{color:#9499AB;}
+		.d2-148127623 .color-N4{color:#CFD2DD;}
+		.d2-148127623 .color-N5{color:#DEE1EB;}
+		.d2-148127623 .color-N6{color:#EEF1F8;}
+		.d2-148127623 .color-N7{color:#FFFFFF;}
+		.d2-148127623 .color-B1{color:#0D32B2;}
+		.d2-148127623 .color-B2{color:#0D32B2;}
+		.d2-148127623 .color-B3{color:#E3E9FD;}
+		.d2-148127623 .color-B4{color:#E3E9FD;}
+		.d2-148127623 .color-B5{color:#EDF0FD;}
+		.d2-148127623 .color-B6{color:#F7F8FE;}
+		.d2-148127623 .color-AA2{color:#4A6FF3;}
+		.d2-148127623 .color-AA4{color:#EDF0FD;}
+		.d2-148127623 .color-AA5{color:#F7F8FE;}
+		.d2-148127623 .color-AB4{color:#EDF0FD;}
+		.d2-148127623 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="a"><g class="shape" ><rect x="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="d2-148127623" maskUnits="userSpaceOnUse" x="-1" y="-1" width="114" height="46">
 <rect x="-1" y="-1" width="114" height="46" fill="white"></rect>
 
 </mask></svg></svg>

e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 102 102"><svg id="d2-svg" width="102" height="102" viewBox="-1 -1 102 102"><rect x="-1.000000" y="-1.000000" width="102.000000" height="102.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 102 102"><svg id="d2-svg" class="d2-198791073" width="102" height="102" viewBox="-1 -1 102 102"><rect x="-1.000000" y="-1.000000" width="102.000000" height="102.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,7 +10,79 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="a"><g class="shape" ><rect x="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="-1" y="-1" width="102" height="102">
+
+		.d2-198791073 .fill-N1{fill:#0A0F25;}
+		.d2-198791073 .fill-N2{fill:#676C7E;}
+		.d2-198791073 .fill-N3{fill:#9499AB;}
+		.d2-198791073 .fill-N4{fill:#CFD2DD;}
+		.d2-198791073 .fill-N5{fill:#DEE1EB;}
+		.d2-198791073 .fill-N6{fill:#EEF1F8;}
+		.d2-198791073 .fill-N7{fill:#FFFFFF;}
+		.d2-198791073 .fill-B1{fill:#0D32B2;}
+		.d2-198791073 .fill-B2{fill:#0D32B2;}
+		.d2-198791073 .fill-B3{fill:#E3E9FD;}
+		.d2-198791073 .fill-B4{fill:#E3E9FD;}
+		.d2-198791073 .fill-B5{fill:#EDF0FD;}
+		.d2-198791073 .fill-B6{fill:#F7F8FE;}
+		.d2-198791073 .fill-AA2{fill:#4A6FF3;}
+		.d2-198791073 .fill-AA4{fill:#EDF0FD;}
+		.d2-198791073 .fill-AA5{fill:#F7F8FE;}
+		.d2-198791073 .fill-AB4{fill:#EDF0FD;}
+		.d2-198791073 .fill-AB5{fill:#F7F8FE;}
+		.d2-198791073 .stroke-N1{stroke:#0A0F25;}
+		.d2-198791073 .stroke-N2{stroke:#676C7E;}
+		.d2-198791073 .stroke-N3{stroke:#9499AB;}
+		.d2-198791073 .stroke-N4{stroke:#CFD2DD;}
+		.d2-198791073 .stroke-N5{stroke:#DEE1EB;}
+		.d2-198791073 .stroke-N6{stroke:#EEF1F8;}
+		.d2-198791073 .stroke-N7{stroke:#FFFFFF;}
+		.d2-198791073 .stroke-B1{stroke:#0D32B2;}
+		.d2-198791073 .stroke-B2{stroke:#0D32B2;}
+		.d2-198791073 .stroke-B3{stroke:#E3E9FD;}
+		.d2-198791073 .stroke-B4{stroke:#E3E9FD;}
+		.d2-198791073 .stroke-B5{stroke:#EDF0FD;}
+		.d2-198791073 .stroke-B6{stroke:#F7F8FE;}
+		.d2-198791073 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-198791073 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-198791073 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-198791073 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-198791073 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-198791073 .background-color-N1{background-color:#0A0F25;}
+		.d2-198791073 .background-color-N2{background-color:#676C7E;}
+		.d2-198791073 .background-color-N3{background-color:#9499AB;}
+		.d2-198791073 .background-color-N4{background-color:#CFD2DD;}
+		.d2-198791073 .background-color-N5{background-color:#DEE1EB;}
+		.d2-198791073 .background-color-N6{background-color:#EEF1F8;}
+		.d2-198791073 .background-color-N7{background-color:#FFFFFF;}
+		.d2-198791073 .background-color-B1{background-color:#0D32B2;}
+		.d2-198791073 .background-color-B2{background-color:#0D32B2;}
+		.d2-198791073 .background-color-B3{background-color:#E3E9FD;}
+		.d2-198791073 .background-color-B4{background-color:#E3E9FD;}
+		.d2-198791073 .background-color-B5{background-color:#EDF0FD;}
+		.d2-198791073 .background-color-B6{background-color:#F7F8FE;}
+		.d2-198791073 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-198791073 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-198791073 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-198791073 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-198791073 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-198791073 .color-N1{color:#0A0F25;}
+		.d2-198791073 .color-N2{color:#676C7E;}
+		.d2-198791073 .color-N3{color:#9499AB;}
+		.d2-198791073 .color-N4{color:#CFD2DD;}
+		.d2-198791073 .color-N5{color:#DEE1EB;}
+		.d2-198791073 .color-N6{color:#EEF1F8;}
+		.d2-198791073 .color-N7{color:#FFFFFF;}
+		.d2-198791073 .color-B1{color:#0D32B2;}
+		.d2-198791073 .color-B2{color:#0D32B2;}
+		.d2-198791073 .color-B3{color:#E3E9FD;}
+		.d2-198791073 .color-B4{color:#E3E9FD;}
+		.d2-198791073 .color-B5{color:#EDF0FD;}
+		.d2-198791073 .color-B6{color:#F7F8FE;}
+		.d2-198791073 .color-AA2{color:#4A6FF3;}
+		.d2-198791073 .color-AA4{color:#EDF0FD;}
+		.d2-198791073 .color-AA5{color:#F7F8FE;}
+		.d2-198791073 .color-AB4{color:#EDF0FD;}
+		.d2-198791073 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="d2-198791073" maskUnits="userSpaceOnUse" x="-1" y="-1" width="102" height="102">
 <rect x="-1" y="-1" width="102" height="102" fill="white"></rect>
 
 </mask></svg></svg>

e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 52 14"><svg id="d2-svg" width="52" height="14" viewBox="-1 -1 52 14"><rect x="-1.000000" y="-1.000000" width="52.000000" height="14.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 52 14"><svg id="d2-svg" class="d2-2388684491" width="52" height="14" viewBox="-1 -1 52 14"><rect x="-1.000000" y="-1.000000" width="52.000000" height="14.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,7 +10,79 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="a"><g class="shape" ><rect x="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="-1" y="-1" width="52" height="14">
+
+		.d2-2388684491 .fill-N1{fill:#0A0F25;}
+		.d2-2388684491 .fill-N2{fill:#676C7E;}
+		.d2-2388684491 .fill-N3{fill:#9499AB;}
+		.d2-2388684491 .fill-N4{fill:#CFD2DD;}
+		.d2-2388684491 .fill-N5{fill:#DEE1EB;}
+		.d2-2388684491 .fill-N6{fill:#EEF1F8;}
+		.d2-2388684491 .fill-N7{fill:#FFFFFF;}
+		.d2-2388684491 .fill-B1{fill:#0D32B2;}
+		.d2-2388684491 .fill-B2{fill:#0D32B2;}
+		.d2-2388684491 .fill-B3{fill:#E3E9FD;}
+		.d2-2388684491 .fill-B4{fill:#E3E9FD;}
+		.d2-2388684491 .fill-B5{fill:#EDF0FD;}
+		.d2-2388684491 .fill-B6{fill:#F7F8FE;}
+		.d2-2388684491 .fill-AA2{fill:#4A6FF3;}
+		.d2-2388684491 .fill-AA4{fill:#EDF0FD;}
+		.d2-2388684491 .fill-AA5{fill:#F7F8FE;}
+		.d2-2388684491 .fill-AB4{fill:#EDF0FD;}
+		.d2-2388684491 .fill-AB5{fill:#F7F8FE;}
+		.d2-2388684491 .stroke-N1{stroke:#0A0F25;}
+		.d2-2388684491 .stroke-N2{stroke:#676C7E;}
+		.d2-2388684491 .stroke-N3{stroke:#9499AB;}
+		.d2-2388684491 .stroke-N4{stroke:#CFD2DD;}
+		.d2-2388684491 .stroke-N5{stroke:#DEE1EB;}
+		.d2-2388684491 .stroke-N6{stroke:#EEF1F8;}
+		.d2-2388684491 .stroke-N7{stroke:#FFFFFF;}
+		.d2-2388684491 .stroke-B1{stroke:#0D32B2;}
+		.d2-2388684491 .stroke-B2{stroke:#0D32B2;}
+		.d2-2388684491 .stroke-B3{stroke:#E3E9FD;}
+		.d2-2388684491 .stroke-B4{stroke:#E3E9FD;}
+		.d2-2388684491 .stroke-B5{stroke:#EDF0FD;}
+		.d2-2388684491 .stroke-B6{stroke:#F7F8FE;}
+		.d2-2388684491 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-2388684491 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-2388684491 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-2388684491 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-2388684491 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-2388684491 .background-color-N1{background-color:#0A0F25;}
+		.d2-2388684491 .background-color-N2{background-color:#676C7E;}
+		.d2-2388684491 .background-color-N3{background-color:#9499AB;}
+		.d2-2388684491 .background-color-N4{background-color:#CFD2DD;}
+		.d2-2388684491 .background-color-N5{background-color:#DEE1EB;}
+		.d2-2388684491 .background-color-N6{background-color:#EEF1F8;}
+		.d2-2388684491 .background-color-N7{background-color:#FFFFFF;}
+		.d2-2388684491 .background-color-B1{background-color:#0D32B2;}
+		.d2-2388684491 .background-color-B2{background-color:#0D32B2;}
+		.d2-2388684491 .background-color-B3{background-color:#E3E9FD;}
+		.d2-2388684491 .background-color-B4{background-color:#E3E9FD;}
+		.d2-2388684491 .background-color-B5{background-color:#EDF0FD;}
+		.d2-2388684491 .background-color-B6{background-color:#F7F8FE;}
+		.d2-2388684491 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-2388684491 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-2388684491 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-2388684491 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-2388684491 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-2388684491 .color-N1{color:#0A0F25;}
+		.d2-2388684491 .color-N2{color:#676C7E;}
+		.d2-2388684491 .color-N3{color:#9499AB;}
+		.d2-2388684491 .color-N4{color:#CFD2DD;}
+		.d2-2388684491 .color-N5{color:#DEE1EB;}
+		.d2-2388684491 .color-N6{color:#EEF1F8;}
+		.d2-2388684491 .color-N7{color:#FFFFFF;}
+		.d2-2388684491 .color-B1{color:#0D32B2;}
+		.d2-2388684491 .color-B2{color:#0D32B2;}
+		.d2-2388684491 .color-B3{color:#E3E9FD;}
+		.d2-2388684491 .color-B4{color:#E3E9FD;}
+		.d2-2388684491 .color-B5{color:#EDF0FD;}
+		.d2-2388684491 .color-B6{color:#F7F8FE;}
+		.d2-2388684491 .color-AA2{color:#4A6FF3;}
+		.d2-2388684491 .color-AA4{color:#EDF0FD;}
+		.d2-2388684491 .color-AA5{color:#F7F8FE;}
+		.d2-2388684491 .color-AB4{color:#EDF0FD;}
+		.d2-2388684491 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="a"><g class="shape" ><rect x="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="d2-2388684491" maskUnits="userSpaceOnUse" x="-1" y="-1" width="52" height="14">
 <rect x="-1" y="-1" width="52" height="14" fill="white"></rect>
 
 </mask></svg></svg>

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 290 130"><svg id="d2-svg" width="290" height="130" viewBox="-1 -1 290 130"><rect x="-1.000000" y="-1.000000" width="290.000000" height="130.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 290 130"><svg id="d2-svg" class="d2-3349745798" width="290" height="130" viewBox="-1 -1 290 130"><rect x="-1.000000" y="-1.000000" width="290.000000" height="130.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,7 +10,79 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-1" y="-1" width="290" height="130">
+
+		.d2-3349745798 .fill-N1{fill:#0A0F25;}
+		.d2-3349745798 .fill-N2{fill:#676C7E;}
+		.d2-3349745798 .fill-N3{fill:#9499AB;}
+		.d2-3349745798 .fill-N4{fill:#CFD2DD;}
+		.d2-3349745798 .fill-N5{fill:#DEE1EB;}
+		.d2-3349745798 .fill-N6{fill:#EEF1F8;}
+		.d2-3349745798 .fill-N7{fill:#FFFFFF;}
+		.d2-3349745798 .fill-B1{fill:#0D32B2;}
+		.d2-3349745798 .fill-B2{fill:#0D32B2;}
+		.d2-3349745798 .fill-B3{fill:#E3E9FD;}
+		.d2-3349745798 .fill-B4{fill:#E3E9FD;}
+		.d2-3349745798 .fill-B5{fill:#EDF0FD;}
+		.d2-3349745798 .fill-B6{fill:#F7F8FE;}
+		.d2-3349745798 .fill-AA2{fill:#4A6FF3;}
+		.d2-3349745798 .fill-AA4{fill:#EDF0FD;}
+		.d2-3349745798 .fill-AA5{fill:#F7F8FE;}
+		.d2-3349745798 .fill-AB4{fill:#EDF0FD;}
+		.d2-3349745798 .fill-AB5{fill:#F7F8FE;}
+		.d2-3349745798 .stroke-N1{stroke:#0A0F25;}
+		.d2-3349745798 .stroke-N2{stroke:#676C7E;}
+		.d2-3349745798 .stroke-N3{stroke:#9499AB;}
+		.d2-3349745798 .stroke-N4{stroke:#CFD2DD;}
+		.d2-3349745798 .stroke-N5{stroke:#DEE1EB;}
+		.d2-3349745798 .stroke-N6{stroke:#EEF1F8;}
+		.d2-3349745798 .stroke-N7{stroke:#FFFFFF;}
+		.d2-3349745798 .stroke-B1{stroke:#0D32B2;}
+		.d2-3349745798 .stroke-B2{stroke:#0D32B2;}
+		.d2-3349745798 .stroke-B3{stroke:#E3E9FD;}
+		.d2-3349745798 .stroke-B4{stroke:#E3E9FD;}
+		.d2-3349745798 .stroke-B5{stroke:#EDF0FD;}
+		.d2-3349745798 .stroke-B6{stroke:#F7F8FE;}
+		.d2-3349745798 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-3349745798 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-3349745798 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-3349745798 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-3349745798 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-3349745798 .background-color-N1{background-color:#0A0F25;}
+		.d2-3349745798 .background-color-N2{background-color:#676C7E;}
+		.d2-3349745798 .background-color-N3{background-color:#9499AB;}
+		.d2-3349745798 .background-color-N4{background-color:#CFD2DD;}
+		.d2-3349745798 .background-color-N5{background-color:#DEE1EB;}
+		.d2-3349745798 .background-color-N6{background-color:#EEF1F8;}
+		.d2-3349745798 .background-color-N7{background-color:#FFFFFF;}
+		.d2-3349745798 .background-color-B1{background-color:#0D32B2;}
+		.d2-3349745798 .background-color-B2{background-color:#0D32B2;}
+		.d2-3349745798 .background-color-B3{background-color:#E3E9FD;}
+		.d2-3349745798 .background-color-B4{background-color:#E3E9FD;}
+		.d2-3349745798 .background-color-B5{background-color:#EDF0FD;}
+		.d2-3349745798 .background-color-B6{background-color:#F7F8FE;}
+		.d2-3349745798 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-3349745798 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-3349745798 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-3349745798 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-3349745798 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-3349745798 .color-N1{color:#0A0F25;}
+		.d2-3349745798 .color-N2{color:#676C7E;}
+		.d2-3349745798 .color-N3{color:#9499AB;}
+		.d2-3349745798 .color-N4{color:#CFD2DD;}
+		.d2-3349745798 .color-N5{color:#DEE1EB;}
+		.d2-3349745798 .color-N6{color:#EEF1F8;}
+		.d2-3349745798 .color-N7{color:#FFFFFF;}
+		.d2-3349745798 .color-B1{color:#0D32B2;}
+		.d2-3349745798 .color-B2{color:#0D32B2;}
+		.d2-3349745798 .color-B3{color:#E3E9FD;}
+		.d2-3349745798 .color-B4{color:#E3E9FD;}
+		.d2-3349745798 .color-B5{color:#EDF0FD;}
+		.d2-3349745798 .color-B6{color:#F7F8FE;}
+		.d2-3349745798 .color-AA2{color:#4A6FF3;}
+		.d2-3349745798 .color-AA4{color:#EDF0FD;}
+		.d2-3349745798 .color-AA5{color:#F7F8FE;}
+		.d2-3349745798 .color-AB4{color:#EDF0FD;}
+		.d2-3349745798 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="d2-3349745798" maskUnits="userSpaceOnUse" x="-1" y="-1" width="290" height="130">
 <rect x="-1" y="-1" width="290" height="130" fill="white"></rect>
 
 </mask></svg></svg>

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 250 130"><svg id="d2-svg" width="250" height="130" viewBox="11 11 250 130"><rect x="11.000000" y="11.000000" width="250.000000" height="130.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 250 130"><svg id="d2-svg" class="d2-1174832781" width="250" height="130" viewBox="11 11 250 130"><rect x="11.000000" y="11.000000" width="250.000000" height="130.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,7 +10,79 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="11" y="11" width="250" height="130">
+
+		.d2-1174832781 .fill-N1{fill:#0A0F25;}
+		.d2-1174832781 .fill-N2{fill:#676C7E;}
+		.d2-1174832781 .fill-N3{fill:#9499AB;}
+		.d2-1174832781 .fill-N4{fill:#CFD2DD;}
+		.d2-1174832781 .fill-N5{fill:#DEE1EB;}
+		.d2-1174832781 .fill-N6{fill:#EEF1F8;}
+		.d2-1174832781 .fill-N7{fill:#FFFFFF;}
+		.d2-1174832781 .fill-B1{fill:#0D32B2;}
+		.d2-1174832781 .fill-B2{fill:#0D32B2;}
+		.d2-1174832781 .fill-B3{fill:#E3E9FD;}
+		.d2-1174832781 .fill-B4{fill:#E3E9FD;}
+		.d2-1174832781 .fill-B5{fill:#EDF0FD;}
+		.d2-1174832781 .fill-B6{fill:#F7F8FE;}
+		.d2-1174832781 .fill-AA2{fill:#4A6FF3;}
+		.d2-1174832781 .fill-AA4{fill:#EDF0FD;}
+		.d2-1174832781 .fill-AA5{fill:#F7F8FE;}
+		.d2-1174832781 .fill-AB4{fill:#EDF0FD;}
+		.d2-1174832781 .fill-AB5{fill:#F7F8FE;}
+		.d2-1174832781 .stroke-N1{stroke:#0A0F25;}
+		.d2-1174832781 .stroke-N2{stroke:#676C7E;}
+		.d2-1174832781 .stroke-N3{stroke:#9499AB;}
+		.d2-1174832781 .stroke-N4{stroke:#CFD2DD;}
+		.d2-1174832781 .stroke-N5{stroke:#DEE1EB;}
+		.d2-1174832781 .stroke-N6{stroke:#EEF1F8;}
+		.d2-1174832781 .stroke-N7{stroke:#FFFFFF;}
+		.d2-1174832781 .stroke-B1{stroke:#0D32B2;}
+		.d2-1174832781 .stroke-B2{stroke:#0D32B2;}
+		.d2-1174832781 .stroke-B3{stroke:#E3E9FD;}
+		.d2-1174832781 .stroke-B4{stroke:#E3E9FD;}
+		.d2-1174832781 .stroke-B5{stroke:#EDF0FD;}
+		.d2-1174832781 .stroke-B6{stroke:#F7F8FE;}
+		.d2-1174832781 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-1174832781 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-1174832781 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-1174832781 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-1174832781 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-1174832781 .background-color-N1{background-color:#0A0F25;}
+		.d2-1174832781 .background-color-N2{background-color:#676C7E;}
+		.d2-1174832781 .background-color-N3{background-color:#9499AB;}
+		.d2-1174832781 .background-color-N4{background-color:#CFD2DD;}
+		.d2-1174832781 .background-color-N5{background-color:#DEE1EB;}
+		.d2-1174832781 .background-color-N6{background-color:#EEF1F8;}
+		.d2-1174832781 .background-color-N7{background-color:#FFFFFF;}
+		.d2-1174832781 .background-color-B1{background-color:#0D32B2;}
+		.d2-1174832781 .background-color-B2{background-color:#0D32B2;}
+		.d2-1174832781 .background-color-B3{background-color:#E3E9FD;}
+		.d2-1174832781 .background-color-B4{background-color:#E3E9FD;}
+		.d2-1174832781 .background-color-B5{background-color:#EDF0FD;}
+		.d2-1174832781 .background-color-B6{background-color:#F7F8FE;}
+		.d2-1174832781 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-1174832781 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-1174832781 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-1174832781 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-1174832781 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-1174832781 .color-N1{color:#0A0F25;}
+		.d2-1174832781 .color-N2{color:#676C7E;}
+		.d2-1174832781 .color-N3{color:#9499AB;}
+		.d2-1174832781 .color-N4{color:#CFD2DD;}
+		.d2-1174832781 .color-N5{color:#DEE1EB;}
+		.d2-1174832781 .color-N6{color:#EEF1F8;}
+		.d2-1174832781 .color-N7{color:#FFFFFF;}
+		.d2-1174832781 .color-B1{color:#0D32B2;}
+		.d2-1174832781 .color-B2{color:#0D32B2;}
+		.d2-1174832781 .color-B3{color:#E3E9FD;}
+		.d2-1174832781 .color-B4{color:#E3E9FD;}
+		.d2-1174832781 .color-B5{color:#EDF0FD;}
+		.d2-1174832781 .color-B6{color:#F7F8FE;}
+		.d2-1174832781 .color-AA2{color:#4A6FF3;}
+		.d2-1174832781 .color-AA4{color:#EDF0FD;}
+		.d2-1174832781 .color-AA5{color:#F7F8FE;}
+		.d2-1174832781 .color-AB4{color:#EDF0FD;}
+		.d2-1174832781 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="d2-1174832781" maskUnits="userSpaceOnUse" x="11" y="11" width="250" height="130">
 <rect x="11" y="11" width="250" height="130" fill="white"></rect>
 
 </mask></svg></svg>