Merge branch 'master' into mono-font

ci/release/changelogs/next.md

@@ -1,11 +1,15 @@
 #### Features 🚀
 
 - `style.font: mono` to use a monospaced font for the text/label [#1010](https://github.com/terrastruct/d2/pull/1010)
+- `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 ⛑️
 
 - Fixes `d2` erroring on malformed user paths (`fdopendir` error). [util-go#10](https://github.com/terrastruct/util-go/pull/10)
+- Arrowhead labels being set without maps wasn't being picked up. [#1015](https://github.com/terrastruct/d2/pull/1015)

d2compiler/compile.go

@@ -488,9 +488,7 @@ func (c *compiler) compileEdgeField(edge *d2graph.Edge, f *d2ir.Field) {
 	}
 
 	if f.Name == "source-arrowhead" || f.Name == "target-arrowhead" {
-		if f.Map() != nil {
-			c.compileArrowheads(edge, f)
-		}
+		c.compileArrowheads(edge, f)
 	}
 }
 
@@ -508,21 +506,23 @@ func (c *compiler) compileArrowheads(edge *d2graph.Edge, f *d2ir.Field) {
 		c.compileLabel(attrs, f)
 	}
 
-	for _, f2 := range f.Map().Fields {
-		keyword := strings.ToLower(f2.Name)
-		_, isReserved := d2graph.SimpleReservedKeywords[keyword]
-		if isReserved {
-			c.compileReserved(attrs, f2)
-			continue
-		} else if f2.Name == "style" {
-			if f2.Map() == nil {
+	if f.Map() != nil {
+		for _, f2 := range f.Map().Fields {
+			keyword := strings.ToLower(f2.Name)
+			_, isReserved := d2graph.SimpleReservedKeywords[keyword]
+			if isReserved {
+				c.compileReserved(attrs, f2)
+				continue
+			} else if f2.Name == "style" {
+				if f2.Map() == nil {
+					continue
+				}
+				c.compileStyle(attrs, f2.Map())
+				continue
+			} else {
+				c.errorf(f2.LastRef().AST(), `source-arrowhead/target-arrowhead map keys must be reserved keywords`)
 				continue
 			}
-			c.compileStyle(attrs, f2.Map())
-			continue
-		} else {
-			c.errorf(f2.LastRef().AST(), `source-arrowhead/target-arrowhead map keys must be reserved keywords`)
-			continue
 		}
 	}
 }

d2compiler/compile_test.go

@@ -971,6 +971,17 @@ x -> y: {
 				}
 			},
 		},
+		{
+			name: "edge_arrowhead_primary",
+
+			text: `x -> y: {
+  source-arrowhead: Reisner's Rule of Conceptual Inertia
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				assert.String(t, "Reisner's Rule of Conceptual Inertia", g.Edges[0].SrcArrowhead.Label.Value)
+			},
+		},
 		{
 			name: "edge_arrowhead_fields",
 

d2renderers/d2sketch/sketch.go

@@ -316,7 +316,7 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 }
 
 func Connection(r *Runner, connection d2target.Connection, path, attrs string) (string, error) {
-	roughness := 1.0
+	roughness := 0.5
 	js := fmt.Sprintf(`node = rc.path("%s", {roughness: %f, seed: 1});`, path, roughness)
 	paths, err := computeRoughPathData(r, js)
 	if err != nil {

d2renderers/d2sketch/sketch_test.go

@@ -18,6 +18,7 @@ import (
 	"oss.terrastruct.com/util-go/go2"
 
 	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
+	"oss.terrastruct.com/d2/d2layouts/d2elklayout"
 	"oss.terrastruct.com/d2/d2lib"
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 	"oss.terrastruct.com/d2/d2renderers/d2svg"
@@ -39,6 +40,15 @@ func TestSketch(t *testing.T) {
 			script: `winter.snow -> summer.sun
 		`,
 		},
+		{
+			name:   "elk corners",
+			engine: "elk",
+			script: `a -> b
+b -> c
+a -> c
+c -> a
+		`,
+		},
 		{
 			name: "animated",
 			script: `winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true }
@@ -1005,6 +1015,49 @@ normal: {
 something
 `,
 		},
+		{
+			name: "class_and_sqlTable_border_radius",
+			script: `
+				a: {
+					shape: sql_table
+					id: int {constraint: primary_key}
+					disk: int {constraint: foreign_key}
+
+					json: jsonb  {constraint: unique}
+					last_updated: timestamp with time zone
+
+					style: {
+						fill: red
+						border-radius: 0
+					}
+				}
+
+				b: {
+					shape: class
+
+					field: "[]string"
+					method(a uint64): (x, y int)
+
+					style: {
+						border-radius: 0
+					}
+				}
+
+				c: {
+					shape: class
+					style: {
+						border-radius: 0
+					}
+				}
+
+				d: {
+					shape: sql_table
+					style: {
+						border-radius: 0
+					}
+				}
+			`,
+		},
 	}
 	runa(t, tcs)
 }
@@ -1014,6 +1067,7 @@ type testCase struct {
 	themeID int64
 	script  string
 	skip    bool
+	engine  string
 }
 
 func runa(t *testing.T, tcs []testCase) {
@@ -1040,9 +1094,13 @@ func run(t *testing.T, tc testCase) {
 		return
 	}
 
+	layout := d2dagrelayout.DefaultLayout
+	if strings.EqualFold(tc.engine, "elk") {
+		layout = d2elklayout.DefaultLayout
+	}
 	diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
 		Ruler:      ruler,
-		Layout:     d2dagrelayout.DefaultLayout,
+		Layout:     layout,
 		FontFamily: go2.Pointer(d2fonts.HandDrawn),
 	})
 	if !tassert.Nil(t, err) {

d2renderers/d2svg/class.go

@@ -11,12 +11,15 @@ import (
 	"oss.terrastruct.com/d2/lib/svg"
 )
 
-func classHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
+func classHeader(diagramHash string, shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
 	rectEl := d2themes.NewThemableElement("rect")
 	rectEl.X, rectEl.Y = box.TopLeft.X, box.TopLeft.Y
 	rectEl.Width, rectEl.Height = box.Width, box.Height
 	rectEl.Fill = shape.Fill
 	rectEl.ClassName = "class_header"
+	if shape.BorderRadius != 0 {
+		rectEl.ClipPath = fmt.Sprintf("%v-%v", diagramHash, shape.ID)
+	}
 	str := rectEl.Render()
 
 	if text != "" {
@@ -81,7 +84,7 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
 	return out
 }
 
-func drawClass(writer io.Writer, targetShape d2target.Shape) {
+func drawClass(writer io.Writer, diagramHash string, targetShape d2target.Shape) {
 	el := d2themes.NewThemableElement("rect")
 	el.X = float64(targetShape.Pos.X)
 	el.Y = float64(targetShape.Pos.Y)
@@ -89,6 +92,10 @@ func drawClass(writer io.Writer, targetShape d2target.Shape) {
 	el.Height = float64(targetShape.Height)
 	el.Fill, el.Stroke = d2themes.ShapeTheme(targetShape)
 	el.Style = targetShape.CSSStyle()
+	if targetShape.BorderRadius != 0 {
+		el.Rx = float64(targetShape.BorderRadius)
+		el.Ry = float64(targetShape.BorderRadius)
+	}
 	fmt.Fprint(writer, el.Render())
 
 	box := geo.NewBox(
@@ -100,7 +107,7 @@ func drawClass(writer io.Writer, targetShape d2target.Shape) {
 	headerBox := geo.NewBox(box.TopLeft, box.Width, 2*rowHeight)
 
 	fmt.Fprint(writer,
-		classHeader(targetShape, headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
+		classHeader(diagramHash, targetShape, headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
 	)
 
 	rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
@@ -113,8 +120,15 @@ func drawClass(writer io.Writer, targetShape d2target.Shape) {
 	}
 
 	lineEl := d2themes.NewThemableElement("line")
-	lineEl.X1, lineEl.Y1 = rowBox.TopLeft.X, rowBox.TopLeft.Y
-	lineEl.X2, lineEl.Y2 = rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y
+
+	if targetShape.BorderRadius != 0 && len(targetShape.Methods) == 0 {
+		lineEl.X1, lineEl.Y1 = rowBox.TopLeft.X+float64(targetShape.BorderRadius), rowBox.TopLeft.Y
+		lineEl.X2, lineEl.Y2 = rowBox.TopLeft.X+rowBox.Width-float64(targetShape.BorderRadius), rowBox.TopLeft.Y
+	} else {
+		lineEl.X1, lineEl.Y1 = rowBox.TopLeft.X, rowBox.TopLeft.Y
+		lineEl.X2, lineEl.Y2 = rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y
+	}
+
 	lineEl.Stroke = targetShape.Fill
 	lineEl.Style = "stroke-width:1"
 	fmt.Fprint(writer, lineEl.Render())

d2renderers/d2svg/d2svg.go

@@ -865,7 +865,7 @@ func render3dHexagon(targetShape d2target.Shape) string {
 	return borderMask + mainShapeRendered + renderedSides + renderedBorder
 }
 
-func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, err error) {
+func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, err error) {
 	closingTag := "</g>"
 	if targetShape.Link != "" {
 
@@ -877,6 +877,11 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 	if targetShape.Opacity != 1.0 {
 		opacityStyle = fmt.Sprintf(" style='opacity:%f'", targetShape.Opacity)
 	}
+
+	// this clipPath must be defined outside `g` element
+	if targetShape.BorderRadius != 0 && (targetShape.Type == d2target.ShapeClass || targetShape.Type == d2target.ShapeSQLTable) {
+		fmt.Fprint(writer, clipPathForBorderRadius(diagramHash, targetShape))
+	}
 	fmt.Fprintf(writer, `<g id="%s"%s>`, svg.EscapeText(targetShape.ID), opacityStyle)
 	tl := geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y))
 	width := float64(targetShape.Width)
@@ -920,7 +925,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			}
 			fmt.Fprint(writer, out)
 		} else {
-			drawClass(writer, targetShape)
+			drawClass(writer, diagramHash, targetShape)
 		}
 		addAppendixItems(writer, targetShape)
 		fmt.Fprint(writer, `</g>`)
@@ -934,7 +939,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			}
 			fmt.Fprint(writer, out)
 		} else {
-			drawTable(writer, targetShape)
+			drawTable(writer, diagramHash, targetShape)
 		}
 		addAppendixItems(writer, targetShape)
 		fmt.Fprint(writer, `</g>`)
@@ -1352,7 +1357,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(
@@ -1364,13 +1369,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)],
 		),
 	)
@@ -1423,13 +1431,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)],
 		),
 	)
@@ -1443,13 +1454,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)],
 		),
 	)
@@ -1465,13 +1479,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)],
 		),
 	)
@@ -1483,13 +1500,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)],
 		),
 	)
@@ -1501,13 +1521,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;
+	font-family: %s-font-mono-italic;
 	src: url("%s");
 }`,
+			diagramHash,
+			diagramHash,
+			diagramHash,
 			d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_ITALIC)],
 		),
 	)
@@ -1612,10 +1635,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
@@ -1635,7 +1660,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
 			}
@@ -1643,7 +1668,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, s, sketchRunner)
+			labelMask, err := drawShape(buf, diagramHash, s, sketchRunner)
 			if err != nil {
 				return nil, err
 			} else if labelMask != "" {
@@ -1658,7 +1683,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,
@@ -1669,8 +1694,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
 	}
@@ -1684,7 +1709,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)
@@ -1753,9 +1783,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(),
@@ -1766,14 +1797,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
 		}
@@ -1783,30 +1814,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,
 		)
 	}

d2renderers/d2svg/table.go

@@ -12,12 +12,43 @@ import (
 	"oss.terrastruct.com/util-go/go2"
 )
 
-func tableHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
+// this func helps define a clipPath for shape class and sql_table to draw border-radius
+func clipPathForBorderRadius(diagramHash string, shape d2target.Shape) string {
+	box := geo.NewBox(
+		geo.NewPoint(float64(shape.Pos.X), float64(shape.Pos.Y)),
+		float64(shape.Width),
+		float64(shape.Height),
+	)
+	topX, topY := box.TopLeft.X+box.Width, box.TopLeft.Y
+
+	out := fmt.Sprintf(`<clipPath id="%v-%v">`, diagramHash, shape.ID)
+	out += fmt.Sprintf(`<path d="M %f %f L %f %f S %f %f %f %f `, box.TopLeft.X, box.TopLeft.Y+float64(shape.BorderRadius), box.TopLeft.X, box.TopLeft.Y+float64(shape.BorderRadius), box.TopLeft.X, box.TopLeft.Y, box.TopLeft.X+float64(shape.BorderRadius), box.TopLeft.Y)
+	out += fmt.Sprintf(`L %f %f L %f %f `, box.TopLeft.X+box.Width-float64(shape.BorderRadius), box.TopLeft.Y, topX-float64(shape.BorderRadius), topY)
+
+	out += fmt.Sprintf(`S %f %f %f %f `, topX, topY, topX, topY+float64(shape.BorderRadius))
+	out += fmt.Sprintf(`L %f %f `, topX, topY+box.Height-float64(shape.BorderRadius))
+
+	if len(shape.Columns) != 0 {
+		out += fmt.Sprintf(`L %f %f L %f %f`, topX, topY+box.Height, box.TopLeft.X, box.TopLeft.Y+box.Height)
+	} else {
+		out += fmt.Sprintf(`S %f % f %f %f `, topX, topY+box.Height, topX-float64(shape.BorderRadius), topY+box.Height)
+		out += fmt.Sprintf(`L %f %f `, box.TopLeft.X+float64(shape.BorderRadius), box.TopLeft.Y+box.Height)
+		out += fmt.Sprintf(`S %f %f %f %f`, box.TopLeft.X, box.TopLeft.Y+box.Height, box.TopLeft.X, box.TopLeft.Y+box.Height-float64(shape.BorderRadius))
+		out += fmt.Sprintf(`L %f %f`, box.TopLeft.X, box.TopLeft.Y+float64(shape.BorderRadius))
+	}
+	out += fmt.Sprintf(`Z %f %f" `, box.TopLeft.X, box.TopLeft.Y)
+	return out + `fill="none" /> </clipPath>`
+}
+
+func tableHeader(diagramHash string, shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
 	rectEl := d2themes.NewThemableElement("rect")
 	rectEl.X, rectEl.Y = box.TopLeft.X, box.TopLeft.Y
 	rectEl.Width, rectEl.Height = box.Width, box.Height
 	rectEl.Fill = shape.Fill
 	rectEl.ClassName = "class_header"
+	if shape.BorderRadius != 0 {
+		rectEl.ClipPath = fmt.Sprintf("%v-%v", diagramHash, shape.ID)
+	}
 	str := rectEl.Render()
 
 	if text != "" {
@@ -82,7 +113,7 @@ func tableRow(shape d2target.Shape, box *geo.Box, nameText, typeText, constraint
 	return out
 }
 
-func drawTable(writer io.Writer, targetShape d2target.Shape) {
+func drawTable(writer io.Writer, diagramHash string, targetShape d2target.Shape) {
 	rectEl := d2themes.NewThemableElement("rect")
 	rectEl.X = float64(targetShape.Pos.X)
 	rectEl.Y = float64(targetShape.Pos.Y)
@@ -91,6 +122,10 @@ func drawTable(writer io.Writer, targetShape d2target.Shape) {
 	rectEl.Fill, rectEl.Stroke = d2themes.ShapeTheme(targetShape)
 	rectEl.ClassName = "shape"
 	rectEl.Style = targetShape.CSSStyle()
+	if targetShape.BorderRadius != 0 {
+		rectEl.Rx = float64(targetShape.BorderRadius)
+		rectEl.Ry = float64(targetShape.BorderRadius)
+	}
 	fmt.Fprint(writer, rectEl.Render())
 
 	box := geo.NewBox(
@@ -102,7 +137,7 @@ func drawTable(writer io.Writer, targetShape d2target.Shape) {
 	headerBox := geo.NewBox(box.TopLeft, box.Width, rowHeight)
 
 	fmt.Fprint(writer,
-		tableHeader(targetShape, headerBox, targetShape.Label,
+		tableHeader(diagramHash, targetShape, headerBox, targetShape.Label,
 			float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
 	)
 
@@ -113,15 +148,20 @@ func drawTable(writer io.Writer, targetShape d2target.Shape) {
 
 	rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
 	rowBox.TopLeft.Y += headerBox.Height
-	for _, f := range targetShape.Columns {
+	for idx, f := range targetShape.Columns {
 		fmt.Fprint(writer,
 			tableRow(targetShape, rowBox, f.Name.Label, f.Type.Label, f.ConstraintAbbr(), float64(targetShape.FontSize), float64(longestNameWidth)),
 		)
 		rowBox.TopLeft.Y += rowHeight
 
 		lineEl := d2themes.NewThemableElement("line")
-		lineEl.X1, lineEl.Y1 = rowBox.TopLeft.X, rowBox.TopLeft.Y
-		lineEl.X2, lineEl.Y2 = rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y
+		if idx == len(targetShape.Columns)-1 && targetShape.BorderRadius != 0 {
+			lineEl.X1, lineEl.Y1 = rowBox.TopLeft.X+float64(targetShape.BorderRadius), rowBox.TopLeft.Y
+			lineEl.X2, lineEl.Y2 = rowBox.TopLeft.X+rowBox.Width-float64(targetShape.BorderRadius), rowBox.TopLeft.Y
+		} else {
+			lineEl.X1, lineEl.Y1 = rowBox.TopLeft.X, rowBox.TopLeft.Y
+			lineEl.X2, lineEl.Y2 = rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y
+		}
 		lineEl.Stroke = targetShape.Fill
 		lineEl.Style = "stroke-width:2"
 		fmt.Fprint(writer, lineEl.Render())

d2themes/element.go

@@ -45,7 +45,8 @@ type ThemableElement struct {
 	Style      string
 	Attributes string
 
-	Content string
+	Content  string
+	ClipPath string
 }
 
 func NewThemableElement(tag string) *ThemableElement {
@@ -84,6 +85,7 @@ func NewThemableElement(tag string) *ThemableElement {
 		"",
 		"",
 		"",
+		"",
 	}
 }
 
@@ -201,8 +203,13 @@ func (el *ThemableElement) Render() string {
 		out += fmt.Sprintf(` %s`, el.Attributes)
 	}
 
+	if len(el.ClipPath) > 0 {
+		out += fmt.Sprintf(` clip-path="url(#%s)"`, el.ClipPath)
+	}
+
 	if len(el.Content) > 0 {
 		return fmt.Sprintf("%s>%s</%s>", out, el.Content, el.tag)
 	}
+
 	return out + " />"
 }

docs/CONTRIBUTING.md

@@ -66,8 +66,7 @@ git submodule update --recursive
 
 ## Logistics
 
-- Use Go 1.18. Go 1.19's autofmt inexplicably strips spacing from ASCII art in comments.
-  We're working on it.
+- Use Go 1.20.
 - Please sign your commits
   ([https://github.com/terrastruct/d2/pull/557#issuecomment-1367468730](https://github.com/terrastruct/d2/pull/557#issuecomment-1367468730)).
 - D2 uses Issues as TODOs. No auto-closing on staleness.

docs/INSTALL.md

@@ -158,7 +158,7 @@ You can always install from source:
 go install oss.terrastruct.com/d2@latest
 ```
 
-You need at least Go v1.18
+You need at least Go v1.20
 
 ### Source Release
 
@@ -175,7 +175,7 @@ fonts and icons. Furthermore, when installing a non versioned commit, installing
 will ensure that `d2 --version` works correctly by embedding the commit hash into the `d2`
 binary.
 
-Remember, you need at least Go v1.18
+Remember, you need at least Go v1.20
 
 ## Windows
 

e2etests/stable_test.go

@@ -12,6 +12,49 @@ var testMarkdown string
 
 func testStable(t *testing.T) {
 	tcs := []testCase{
+		{
+			name: "class_and_sqlTable_border_radius",
+			script: `
+				a: {
+					shape: sql_table
+					id: int {constraint: primary_key}
+					disk: int {constraint: foreign_key}
+
+					json: jsonb  {constraint: unique}
+					last_updated: timestamp with time zone
+					
+					style: {
+						fill: red
+						border-radius: 10
+					}
+				}
+
+				b: {
+					shape: class
+
+					field: "[]string"
+					method(a uint64): (x, y int)
+					
+					style: {
+						border-radius: 10
+					}
+				}
+
+				c: {
+					shape: class
+					style: {
+						border-radius: 5
+					}
+				}
+
+				d: {
+					shape: sql_table
+					style: {
+						border-radius: 5
+					}
+				}
+			`,
+		},
 		{
 			name: "elk_border_radius",
 			script: `

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/board.exp.json

@@ -31,6 +31,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "",
         "Fragment": "",
@@ -82,6 +83,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "",
         "Fragment": "",

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-2165548676" 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-2165548676 .fill-N1{fill:#0A0F25;}
+		.d2-2165548676 .fill-N2{fill:#676C7E;}
+		.d2-2165548676 .fill-N3{fill:#9499AB;}
+		.d2-2165548676 .fill-N4{fill:#CFD2DD;}
+		.d2-2165548676 .fill-N5{fill:#DEE1EB;}
+		.d2-2165548676 .fill-N6{fill:#EEF1F8;}
+		.d2-2165548676 .fill-N7{fill:#FFFFFF;}
+		.d2-2165548676 .fill-B1{fill:#0D32B2;}
+		.d2-2165548676 .fill-B2{fill:#0D32B2;}
+		.d2-2165548676 .fill-B3{fill:#E3E9FD;}
+		.d2-2165548676 .fill-B4{fill:#E3E9FD;}
+		.d2-2165548676 .fill-B5{fill:#EDF0FD;}
+		.d2-2165548676 .fill-B6{fill:#F7F8FE;}
+		.d2-2165548676 .fill-AA2{fill:#4A6FF3;}
+		.d2-2165548676 .fill-AA4{fill:#EDF0FD;}
+		.d2-2165548676 .fill-AA5{fill:#F7F8FE;}
+		.d2-2165548676 .fill-AB4{fill:#EDF0FD;}
+		.d2-2165548676 .fill-AB5{fill:#F7F8FE;}
+		.d2-2165548676 .stroke-N1{stroke:#0A0F25;}
+		.d2-2165548676 .stroke-N2{stroke:#676C7E;}
+		.d2-2165548676 .stroke-N3{stroke:#9499AB;}
+		.d2-2165548676 .stroke-N4{stroke:#CFD2DD;}
+		.d2-2165548676 .stroke-N5{stroke:#DEE1EB;}
+		.d2-2165548676 .stroke-N6{stroke:#EEF1F8;}
+		.d2-2165548676 .stroke-N7{stroke:#FFFFFF;}
+		.d2-2165548676 .stroke-B1{stroke:#0D32B2;}
+		.d2-2165548676 .stroke-B2{stroke:#0D32B2;}
+		.d2-2165548676 .stroke-B3{stroke:#E3E9FD;}
+		.d2-2165548676 .stroke-B4{stroke:#E3E9FD;}
+		.d2-2165548676 .stroke-B5{stroke:#EDF0FD;}
+		.d2-2165548676 .stroke-B6{stroke:#F7F8FE;}
+		.d2-2165548676 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-2165548676 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-2165548676 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-2165548676 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-2165548676 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-2165548676 .background-color-N1{background-color:#0A0F25;}
+		.d2-2165548676 .background-color-N2{background-color:#676C7E;}
+		.d2-2165548676 .background-color-N3{background-color:#9499AB;}
+		.d2-2165548676 .background-color-N4{background-color:#CFD2DD;}
+		.d2-2165548676 .background-color-N5{background-color:#DEE1EB;}
+		.d2-2165548676 .background-color-N6{background-color:#EEF1F8;}
+		.d2-2165548676 .background-color-N7{background-color:#FFFFFF;}
+		.d2-2165548676 .background-color-B1{background-color:#0D32B2;}
+		.d2-2165548676 .background-color-B2{background-color:#0D32B2;}
+		.d2-2165548676 .background-color-B3{background-color:#E3E9FD;}
+		.d2-2165548676 .background-color-B4{background-color:#E3E9FD;}
+		.d2-2165548676 .background-color-B5{background-color:#EDF0FD;}
+		.d2-2165548676 .background-color-B6{background-color:#F7F8FE;}
+		.d2-2165548676 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-2165548676 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-2165548676 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-2165548676 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-2165548676 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-2165548676 .color-N1{color:#0A0F25;}
+		.d2-2165548676 .color-N2{color:#676C7E;}
+		.d2-2165548676 .color-N3{color:#9499AB;}
+		.d2-2165548676 .color-N4{color:#CFD2DD;}
+		.d2-2165548676 .color-N5{color:#DEE1EB;}
+		.d2-2165548676 .color-N6{color:#EEF1F8;}
+		.d2-2165548676 .color-N7{color:#FFFFFF;}
+		.d2-2165548676 .color-B1{color:#0D32B2;}
+		.d2-2165548676 .color-B2{color:#0D32B2;}
+		.d2-2165548676 .color-B3{color:#E3E9FD;}
+		.d2-2165548676 .color-B4{color:#E3E9FD;}
+		.d2-2165548676 .color-B5{color:#EDF0FD;}
+		.d2-2165548676 .color-B6{color:#F7F8FE;}
+		.d2-2165548676 .color-AA2{color:#4A6FF3;}
+		.d2-2165548676 .color-AA4{color:#EDF0FD;}
+		.d2-2165548676 .color-AA5{color:#F7F8FE;}
+		.d2-2165548676 .color-AB4{color:#EDF0FD;}
+		.d2-2165548676 .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-2165548676" 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/board.exp.json

@@ -31,6 +31,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "",
         "Fragment": "",
@@ -82,6 +83,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "",
         "Fragment": "",

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-2013875393" 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-2013875393 .fill-N1{fill:#0A0F25;}
+		.d2-2013875393 .fill-N2{fill:#676C7E;}
+		.d2-2013875393 .fill-N3{fill:#9499AB;}
+		.d2-2013875393 .fill-N4{fill:#CFD2DD;}
+		.d2-2013875393 .fill-N5{fill:#DEE1EB;}
+		.d2-2013875393 .fill-N6{fill:#EEF1F8;}
+		.d2-2013875393 .fill-N7{fill:#FFFFFF;}
+		.d2-2013875393 .fill-B1{fill:#0D32B2;}
+		.d2-2013875393 .fill-B2{fill:#0D32B2;}
+		.d2-2013875393 .fill-B3{fill:#E3E9FD;}
+		.d2-2013875393 .fill-B4{fill:#E3E9FD;}
+		.d2-2013875393 .fill-B5{fill:#EDF0FD;}
+		.d2-2013875393 .fill-B6{fill:#F7F8FE;}
+		.d2-2013875393 .fill-AA2{fill:#4A6FF3;}
+		.d2-2013875393 .fill-AA4{fill:#EDF0FD;}
+		.d2-2013875393 .fill-AA5{fill:#F7F8FE;}
+		.d2-2013875393 .fill-AB4{fill:#EDF0FD;}
+		.d2-2013875393 .fill-AB5{fill:#F7F8FE;}
+		.d2-2013875393 .stroke-N1{stroke:#0A0F25;}
+		.d2-2013875393 .stroke-N2{stroke:#676C7E;}
+		.d2-2013875393 .stroke-N3{stroke:#9499AB;}
+		.d2-2013875393 .stroke-N4{stroke:#CFD2DD;}
+		.d2-2013875393 .stroke-N5{stroke:#DEE1EB;}
+		.d2-2013875393 .stroke-N6{stroke:#EEF1F8;}
+		.d2-2013875393 .stroke-N7{stroke:#FFFFFF;}
+		.d2-2013875393 .stroke-B1{stroke:#0D32B2;}
+		.d2-2013875393 .stroke-B2{stroke:#0D32B2;}
+		.d2-2013875393 .stroke-B3{stroke:#E3E9FD;}
+		.d2-2013875393 .stroke-B4{stroke:#E3E9FD;}
+		.d2-2013875393 .stroke-B5{stroke:#EDF0FD;}
+		.d2-2013875393 .stroke-B6{stroke:#F7F8FE;}
+		.d2-2013875393 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-2013875393 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-2013875393 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-2013875393 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-2013875393 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-2013875393 .background-color-N1{background-color:#0A0F25;}
+		.d2-2013875393 .background-color-N2{background-color:#676C7E;}
+		.d2-2013875393 .background-color-N3{background-color:#9499AB;}
+		.d2-2013875393 .background-color-N4{background-color:#CFD2DD;}
+		.d2-2013875393 .background-color-N5{background-color:#DEE1EB;}
+		.d2-2013875393 .background-color-N6{background-color:#EEF1F8;}
+		.d2-2013875393 .background-color-N7{background-color:#FFFFFF;}
+		.d2-2013875393 .background-color-B1{background-color:#0D32B2;}
+		.d2-2013875393 .background-color-B2{background-color:#0D32B2;}
+		.d2-2013875393 .background-color-B3{background-color:#E3E9FD;}
+		.d2-2013875393 .background-color-B4{background-color:#E3E9FD;}
+		.d2-2013875393 .background-color-B5{background-color:#EDF0FD;}
+		.d2-2013875393 .background-color-B6{background-color:#F7F8FE;}
+		.d2-2013875393 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-2013875393 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-2013875393 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-2013875393 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-2013875393 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-2013875393 .color-N1{color:#0A0F25;}
+		.d2-2013875393 .color-N2{color:#676C7E;}
+		.d2-2013875393 .color-N3{color:#9499AB;}
+		.d2-2013875393 .color-N4{color:#CFD2DD;}
+		.d2-2013875393 .color-N5{color:#DEE1EB;}
+		.d2-2013875393 .color-N6{color:#EEF1F8;}
+		.d2-2013875393 .color-N7{color:#FFFFFF;}
+		.d2-2013875393 .color-B1{color:#0D32B2;}
+		.d2-2013875393 .color-B2{color:#0D32B2;}
+		.d2-2013875393 .color-B3{color:#E3E9FD;}
+		.d2-2013875393 .color-B4{color:#E3E9FD;}
+		.d2-2013875393 .color-B5{color:#EDF0FD;}
+		.d2-2013875393 .color-B6{color:#F7F8FE;}
+		.d2-2013875393 .color-AA2{color:#4A6FF3;}
+		.d2-2013875393 .color-AA4{color:#EDF0FD;}
+		.d2-2013875393 .color-AA5{color:#F7F8FE;}
+		.d2-2013875393 .color-AB4{color:#EDF0FD;}
+		.d2-2013875393 .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-2013875393" 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>