Merge branch 'master' into 3d-hexagon

ci/release/changelogs/next.md

@@ -1,11 +1,17 @@
 #### Features 🚀
 
 - PDF exports are now supported. [#120](https://github.com/terrastruct/d2/issues/120)
+- Diagram background can be styled. [#910](https://github.com/terrastruct/d2/issues/910)
 - 3D Hexagons are now supported. [#869](https://github.com/terrastruct/d2/issues/869)
 
 #### Improvements 🧹
 
+- `near` key set to sequence diagram children get an appropriate error message. [#899](https://github.com/terrastruct/d2/issues/899)
+- `class` and `sql_table` shape respect `font-color` styling as header font color. [#899](https://github.com/terrastruct/d2/issues/899)
+- SVG fits to screen by default in both watch mode and as a standalone SVG (this time with just CSS, no JS). [#725](https://github.com/terrastruct/d2/issues/725)
+
 #### Bugfixes ⛑️
 
 - Error reported when no actors are declared in sequence diagram. [#886](https://github.com/terrastruct/d2/pull/886)
 - Fixed img bundling on image shapes. [#889](https://github.com/terrastruct/d2/issues/889)
+- `class` shape as sequence diagram actors had wrong colors. [#899](https://github.com/terrastruct/d2/issues/899)

ci/release/template/man/d2.1

@@ -67,9 +67,12 @@ Port listening address when used with
 Set the diagram theme ID
 .Ns .
 .It Fl -dark-theme Ar -1
-Set the diagram dark theme ID. If unset, the
-.Ar theme
-is used for both light and dark modes
+The theme to use when the viewer's browser is in dark mode. When left unset
+.Fl -theme
+is used for both light and dark mode. Be aware that explicit styles set in D2 code will
+still be applied and this may produce unexpected results. We plan on resolving this by
+making style maps in D2 light/dark mode specific. See
+.Lk https://github.com/terrastruct/d2/issues/831
 .Ns .
 .It Fl s , -sketch Ar false
 Renders the diagram to look like it was sketched by hand

d2compiler/compile.go

@@ -678,6 +678,10 @@ func (c *compiler) validateNear(g *d2graph.Graph) {
 					c.errorf(obj.Attributes.NearKey, "near keys cannot be set to an descendant")
 					continue
 				}
+				if nearObj.OuterSequenceDiagram() != nil {
+					c.errorf(obj.Attributes.NearKey, "near keys cannot be set to an object within sequence diagrams")
+					continue
+				}
 			} else if isConst {
 				is := false
 				for _, e := range g.Edges {

d2compiler/compile_test.go

@@ -1774,6 +1774,17 @@ dst.id <-> src.dst_id
 				assert.String(t, "sequence_diagram", g.Objects[0].Attributes.Shape.Value)
 			},
 		},
+		{
+			name: "near_sequence",
+
+			text: `x: {
+  shape: sequence_diagram
+  a
+}
+b.near: x.a
+`,
+			expErr: `d2/testdata/d2compiler/TestCompile/near_sequence.d2:5:9: near keys cannot be set to an object within sequence diagrams`,
+		},
 		{
 			name: "sequence-timestamp",
 

d2exporter/export.go

@@ -14,6 +14,7 @@ import (
 
 func Export(ctx context.Context, g *d2graph.Graph, fontFamily *d2fonts.FontFamily) (*d2target.Diagram, error) {
 	diagram := d2target.NewDiagram()
+	applyStyles(&diagram.Root, g.Root)
 	diagram.Name = g.Name
 	if fontFamily == nil {
 		fontFamily = go2.Pointer(d2fonts.SourceSansPro)

d2graph/d2graph.go

@@ -338,6 +338,12 @@ func (l ContainerLevel) LabelSize() int {
 
 func (obj *Object) GetFill() string {
 	level := int(obj.Level())
+	shape := obj.Attributes.Shape.Value
+
+	if strings.EqualFold(shape, d2target.ShapeSQLTable) || strings.EqualFold(shape, d2target.ShapeClass) {
+		return color.N1
+	}
+
 	if obj.IsSequenceDiagramNote() {
 		return color.N7
 	} else if obj.IsSequenceDiagramGroup() {
@@ -366,8 +372,6 @@ func (obj *Object) GetFill() string {
 		return color.N7
 	}
 
-	shape := obj.Attributes.Shape.Value
-
 	if shape == "" || strings.EqualFold(shape, d2target.ShapeSquare) || strings.EqualFold(shape, d2target.ShapeCircle) || strings.EqualFold(shape, d2target.ShapeOval) || strings.EqualFold(shape, d2target.ShapeRectangle) {
 		if level == 1 {
 			if !obj.IsContainer() {
@@ -409,10 +413,6 @@ func (obj *Object) GetFill() string {
 		return color.N5
 	}
 
-	if strings.EqualFold(shape, d2target.ShapeSQLTable) || strings.EqualFold(shape, d2target.ShapeClass) {
-		return color.N1
-	}
-
 	return color.N7
 }
 

d2renderers/d2sketch/sketch.go

@@ -382,7 +382,7 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 		textEl := d2themes.NewThemableElement("text")
 		textEl.X = tl.X
 		textEl.Y = tl.Y + float64(shape.LabelHeight)*3/4
-		textEl.Fill = shape.Stroke
+		textEl.Fill = shape.GetFontColor()
 		textEl.ClassName = "text"
 		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx",
 			"start", 4+shape.FontSize,
@@ -532,7 +532,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 		textEl := d2themes.NewThemableElement("text")
 		textEl.X = tl.X + float64(shape.LabelWidth)/2
 		textEl.Y = tl.Y + float64(shape.LabelHeight)*3/4
-		textEl.Fill = shape.Stroke
+		textEl.Fill = shape.GetFontColor()
 		textEl.ClassName = "text-mono"
 		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx",
 			"middle",

d2renderers/d2sketch/sketch_test.go

@@ -14,6 +14,7 @@ import (
 	tassert "github.com/stretchr/testify/assert"
 
 	"oss.terrastruct.com/util-go/assert"
+	"oss.terrastruct.com/util-go/diff"
 	"oss.terrastruct.com/util-go/go2"
 
 	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
@@ -949,6 +950,42 @@ users: {
 	last_login: datetime
 	style.opacity: 0.4
 }
+`,
+		},
+		{
+			name: "root-fill",
+			script: `style.fill: honeydew
+style.stroke: LightSteelBlue
+style.double-border: true
+
+title: Flow-I (Warehousing, Installation) {
+  near: top-center
+  shape: text
+  style: {
+    font-size: 24
+    bold: false
+    underline: false
+  }
+}
+OEM Factory
+OEM Factory -> OEM Warehouse
+OEM Factory -> Distributor Warehouse
+OEM Factory -> company Warehouse
+
+company Warehouse.Master -> company Warehouse.Regional-1
+company Warehouse.Master -> company Warehouse.Regional-2
+company Warehouse.Master -> company Warehouse.Regional-N
+company Warehouse.Regional-1 -> company Warehouse.Regional-2
+company Warehouse.Regional-2 -> company Warehouse.Regional-N
+company Warehouse.Regional-N -> company Warehouse.Regional-1
+
+company Warehouse.explanation: |md
+  ### company Warehouse
+  - Asset Tagging
+  - Inventory
+  - Staging
+  - Dispatch to Site
+|
 `,
 		},
 	}
@@ -1013,4 +1050,7 @@ func run(t *testing.T, tc testCase) {
 	var xmlParsed interface{}
 	err = xml.Unmarshal(svgBytes, &xmlParsed)
 	assert.Success(t, err)
+
+	// We want the visual diffs to compare, but there's floating point precision differences between CI and user machines, so don't compare raw strings
+	diff.Testdata(filepath.Join(dataPath, "sketch"), ".svg", svgBytes)
 }

d2renderers/d2svg/appendix/appendix.go

@@ -62,7 +62,9 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by
 		return in
 	}
 
-	viewboxMatch := viewboxRegex.FindStringSubmatch(svg)
+	// match 1st two viewboxes, 1st is outer fit-to-screen viewbox="0 0 innerWidth innerHeight"
+	viewboxMatches := viewboxRegex.FindAllStringSubmatch(svg, 2)
+	viewboxMatch := viewboxMatches[1]
 	viewboxRaw := viewboxMatch[1]
 	viewboxSlice := strings.Split(viewboxRaw, " ")
 	viewboxPadLeft, _ := strconv.Atoi(viewboxSlice[0])
@@ -86,6 +88,7 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by
 
 	viewboxHeight += h + PAD_TOP
 
+	newOuterViewbox := fmt.Sprintf(`viewBox="0 0 %d %d"`, viewboxWidth, viewboxHeight)
 	newViewbox := fmt.Sprintf(`viewBox="%s %s %s %s"`, viewboxSlice[0], viewboxSlice[1], strconv.Itoa(viewboxWidth), strconv.Itoa(viewboxHeight))
 
 	widthMatches := widthRegex.FindAllStringSubmatch(svg, 2)
@@ -93,6 +96,7 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by
 	newWidth := fmt.Sprintf(`width="%s"`, strconv.Itoa(viewboxWidth))
 	newHeight := fmt.Sprintf(`height="%s"`, strconv.Itoa(viewboxHeight))
 
+	svg = strings.Replace(svg, viewboxMatches[0][0], newOuterViewbox, 1)
 	svg = strings.Replace(svg, viewboxMatch[0], newViewbox, 1)
 	for i := 0; i < 2; i++ {
 		svg = strings.Replace(svg, widthMatches[i][0], newWidth, 1)
@@ -122,7 +126,7 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by
 ]]></style>`, d2fonts.FontEncodings[d2fonts.SourceSansPro.Font(0, d2fonts.FONT_STYLE_BOLD)])
 	}
 
-	closingIndex := strings.LastIndex(svg, "</svg>")
+	closingIndex := strings.LastIndex(svg, "</svg></svg>")
 	svg = svg[:closingIndex] + appendix + svg[closingIndex:]
 
 	i := 1

d2renderers/d2svg/appendix/appendix_test.go

@@ -90,6 +90,14 @@ x -> y
 			script: `x: { link: https://d2lang.com }
 			y: { link: https://fosny.eu; tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
 x -> y
+`,
+		},
+		{
+			name: "tooltip_fill",
+			script: `x: { tooltip: Total abstinence is easier than perfect moderation }
+y: { tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
+x -> y
+style.fill: PaleVioletRed
 `,
 		},
 	}

d2renderers/d2svg/class.go

@@ -30,7 +30,7 @@ func classHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, tex
 		textEl := d2themes.NewThemableElement("text")
 		textEl.X = tl.X + textWidth/2
 		textEl.Y = tl.Y + textHeight*3/4
-		textEl.Fill = shape.Stroke
+		textEl.Fill = shape.GetFontColor()
 		textEl.ClassName = "text-mono"
 		textEl.Style = fmt.Sprintf(`text-anchor:%s;font-size:%vpx;`,
 			"middle", 4+fontSize,

d2renderers/d2svg/d2svg.go

@@ -42,9 +42,6 @@ const (
 	MIN_ARROWHEAD_STROKE_WIDTH = 2
 
 	appendixIconRadius = 16
-
-	BG_COLOR = color.N7
-	FG_COLOR = color.N1
 )
 
 var multipleOffset = geo.NewVector(d2target.MULTIPLE_OFFSET, -d2target.MULTIPLE_OFFSET)
@@ -220,7 +217,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 	case d2target.DiamondArrowhead:
 		polygonEl := d2themes.NewThemableElement("polygon")
 		polygonEl.ClassName = "connection"
-		polygonEl.Fill = BG_COLOR
+		polygonEl.Fill = d2target.BG_COLOR
 		polygonEl.Stroke = connection.Stroke
 		polygonEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
 
@@ -263,7 +260,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 		circleEl := d2themes.NewThemableElement("circle")
 		circleEl.Cy = radius
 		circleEl.R = radius - strokeWidth
-		circleEl.Fill = BG_COLOR
+		circleEl.Fill = d2target.BG_COLOR
 		circleEl.Stroke = connection.Stroke
 		circleEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
 
@@ -284,7 +281,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 				offset, 0.,
 				offset, height,
 			)
-			modifierEl.Fill = BG_COLOR
+			modifierEl.Fill = d2target.BG_COLOR
 			modifierEl.Stroke = connection.Stroke
 			modifierEl.ClassName = "connection"
 			modifierEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
@@ -293,7 +290,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 			modifierEl.Cx = offset/2.0 + 2.0
 			modifierEl.Cy = height / 2.0
 			modifierEl.R = offset / 2.0
-			modifierEl.Fill = BG_COLOR
+			modifierEl.Fill = d2target.BG_COLOR
 			modifierEl.Stroke = connection.Stroke
 			modifierEl.ClassName = "connection"
 			modifierEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
@@ -322,7 +319,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 		if !isTarget {
 			gEl.Transform = fmt.Sprintf("scale(-1) translate(-%f, -%f)", width, height)
 		}
-		gEl.Fill = BG_COLOR
+		gEl.Fill = d2target.BG_COLOR
 		gEl.Stroke = connection.Stroke
 		gEl.ClassName = "connection"
 		gEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
@@ -562,11 +559,6 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		} else if connection.Italic {
 			fontClass += "-italic"
 		}
-		fontColor := color.N1
-		if connection.Color != color.Empty {
-			fontColor = connection.Color
-		}
-
 		if connection.Fill != color.Empty {
 			rectEl := d2themes.NewThemableElement("rect")
 			rectEl.X, rectEl.Y = labelTL.X, labelTL.Y
@@ -578,7 +570,7 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		textEl := d2themes.NewThemableElement("text")
 		textEl.X = labelTL.X + float64(connection.LabelWidth)/2
 		textEl.Y = labelTL.Y + float64(connection.FontSize)
-		textEl.Fill = fontColor
+		textEl.Fill = connection.GetFontColor()
 		textEl.ClassName = fontClass
 		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize)
 		textEl.Content = RenderText(connection.Label, textEl.X, float64(connection.LabelHeight))
@@ -614,7 +606,7 @@ func renderArrowheadLabel(connection d2target.Connection, text string, position,
 	textEl := d2themes.NewThemableElement("text")
 	textEl.X = labelTL.X + width/2
 	textEl.Y = labelTL.Y + float64(connection.FontSize)
-	textEl.Fill = FG_COLOR
+	textEl.Fill = d2target.FG_COLOR
 	textEl.ClassName = "text-italic"
 	textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize)
 	textEl.Content = RenderText(text, textEl.X, height)
@@ -987,6 +979,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 	// TODO should standardize "" to rectangle
 	case d2target.ShapeRectangle, d2target.ShapeSequenceDiagram, "":
 		// TODO use Rx property of NewThemableElement instead
+		// DO
 		rx := ""
 		if targetShape.BorderRadius != 0 {
 			rx = fmt.Sprintf(` rx="%d"`, targetShape.BorderRadius)
@@ -1268,10 +1261,6 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			fmt.Fprint(writer, mdEl.Render())
 			fmt.Fprint(writer, `</foreignObject></g>`)
 		} else {
-			fontColor := color.N1
-			if targetShape.Color != color.Empty {
-				fontColor = targetShape.Color
-			}
 			if targetShape.LabelFill != "" {
 				rectEl := d2themes.NewThemableElement("rect")
 				rectEl.X = labelTL.X
@@ -1285,7 +1274,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			textEl.X = labelTL.X + float64(targetShape.LabelWidth)/2
 			// text is vertically positioned at its baseline which is at labelTL+FontSize
 			textEl.Y = labelTL.Y + float64(targetShape.FontSize)
-			textEl.Fill = fontColor
+			textEl.Fill = targetShape.GetFontColor()
 			textEl.ClassName = fontClass
 			textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", targetShape.FontSize)
 			textEl.Content = RenderText(targetShape.Label, textEl.X, float64(targetShape.LabelHeight))
@@ -1604,9 +1593,6 @@ func appendOnTrigger(buf *bytes.Buffer, source string, triggers []string, newCon
 	}
 }
 
-//go:embed fitToScreen.js
-var fitToScreenScript string
-
 const DEFAULT_THEME int64 = 0
 
 var DEFAULT_DARK_THEME *int64 = nil // no theme selected
@@ -1699,14 +1685,16 @@ 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`
+	if sketchRunner != nil {
+		d2sketch.DefineFillPatterns(upperBuf)
+	}
+
 	themeStylesheet, err := themeCSS(themeID, darkThemeID)
 	if err != nil {
 		return nil, err
 	}
 	fmt.Fprintf(upperBuf, `<style type="text/css"><![CDATA[%s%s]]></style>`, baseStylesheet, themeStylesheet)
-	// this script won't run in --watch mode because script tags are ignored when added via el.innerHTML = element
-	// https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
-	fmt.Fprintf(upperBuf, `<script type="application/javascript"><![CDATA[%s]]></script>`, fitToScreenScript)
+
 	hasMarkdown := false
 	for _, s := range diagram.Shapes {
 		if s.Label != "" && s.Type == d2target.ShapeText {
@@ -1717,22 +1705,70 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	if hasMarkdown {
 		fmt.Fprintf(upperBuf, `<style type="text/css">%s</style>`, mdCSS)
 	}
-	if sketchRunner != nil {
-		d2sketch.DefineFillPatterns(upperBuf)
-	}
 
-	// TODO background stuff. e.g. dotted, grid, colors
+	// This shift is for background el to envelop the diagram
+	left -= int(math.Ceil(float64(diagram.Root.StrokeWidth) / 2.))
+	top -= int(math.Ceil(float64(diagram.Root.StrokeWidth) / 2.))
+	w += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.) * 2.)
+	h += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.) * 2.)
 	backgroundEl := d2themes.NewThemableElement("rect")
+	// We don't want to change the document viewbox, only the background el
 	backgroundEl.X = float64(left)
 	backgroundEl.Y = float64(top)
 	backgroundEl.Width = float64(w)
 	backgroundEl.Height = float64(h)
-	backgroundEl.Fill = BG_COLOR
+	backgroundEl.Fill = diagram.Root.Fill
+	backgroundEl.Stroke = diagram.Root.Stroke
+	backgroundEl.Rx = float64(diagram.Root.BorderRadius)
+	if diagram.Root.StrokeDash != 0 {
+		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(diagram.Root.StrokeWidth), diagram.Root.StrokeDash)
+		backgroundEl.StrokeDashArray = fmt.Sprintf("%f, %f", dashSize, gapSize)
+	}
+	backgroundEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, diagram.Root.StrokeWidth)
+
+	// This shift is for viewbox to envelop the background el
+	left -= int(math.Ceil(float64(diagram.Root.StrokeWidth) / 2.))
+	top -= int(math.Ceil(float64(diagram.Root.StrokeWidth) / 2.))
+	w += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.) * 2.)
+	h += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.) * 2.)
+
+	doubleBorderElStr := ""
+	if diagram.Root.DoubleBorder {
+		offset := d2target.INNER_BORDER_OFFSET
+
+		left -= int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.)) + offset
+		top -= int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.)) + offset
+		w += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.)*2.) + 2*offset
+		h += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.)*2.) + 2*offset
+
+		backgroundEl2 := backgroundEl.Copy()
+		// No need to double-paint
+		backgroundEl.Fill = "transparent"
+
+		backgroundEl2.X = float64(left)
+		backgroundEl2.Y = float64(top)
+		backgroundEl2.Width = float64(w)
+		backgroundEl2.Height = float64(h)
+		doubleBorderElStr = backgroundEl2.Render()
+
+		left -= int(math.Ceil(float64(diagram.Root.StrokeWidth) / 2.))
+		top -= int(math.Ceil(float64(diagram.Root.StrokeWidth) / 2.))
+		w += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.) * 2.)
+		h += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.) * 2.)
+	}
+
+	fitToScreenWrapper := fmt.Sprintf(`<svg %s preserveAspectRatio="xMidYMid meet" viewBox="0 0 %d %d">`,
+		`xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"`,
+		w, h,
+	)
 
 	// TODO minify
-	docRendered := fmt.Sprintf(`<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="%d" height="%d" viewBox="%d %d %d %d">%s%s%s</svg>`,
+	docRendered := fmt.Sprintf(`%s%s<svg id="d2-svg" width="%d" height="%d" viewBox="%d %d %d %d">%s%s%s%s</svg></svg>`,
+		`<?xml version="1.0" encoding="utf-8"?>`,
+		fitToScreenWrapper,
 		w, h, left, top, w, h,
-		backgroundEl.Render(), // must be first
+		doubleBorderElStr,
+		backgroundEl.Render(),
 		upperBuf.String(),
 		buf.String(),
 	)

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1096" height="481" viewBox="-100 -102 1096 481"><rect x="-100.000000" y="-102.000000" width="1096.000000" height="481.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1095 479"><svg id="d2-svg" width="1095" height="479" viewBox="-100 -101 1095 479"><rect x="-100.000000" y="-101.000000" width="1095.000000" height="479.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -794,7 +774,7 @@
   margin: 0 -1.6em 0.25em 0.2em;
 }
 </style><g id="x" style='opacity:0.400000'><g class="shape" ><rect x="162.000000" y="3.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.000000" y="41.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="276.000000" y="24.000000" width="347" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>linux: because a PC is a terrible thing to waste</p>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="162.000000" y="211.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.000000" y="249.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="users" style='opacity:0.400000'><g class="shape" ><rect x="683.000000" y="0.000000" width="211.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="683.000000" y="0.000000" width="211.000000" height="36.000000" class="class_header fill-N1" /><text x="693.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="693.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="796.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="874.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="683.000000" x2="894.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.000000 71.000000 C 189.000000 127.000000 189.000000 155.500000 189.000000 207.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#928565738)" /><text x="189.000000" y="137.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="189.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="189.000000" dy="19.500000">just how to work the computer.</tspan></text></g><mask id="928565738" maskUnits="userSpaceOnUse" x="-100" y="-102" width="1096" height="481">
-<rect x="-100" y="-102" width="1096" height="481" fill="white"></rect>
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="162.000000" y="211.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.000000" y="249.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="users" style='opacity:0.400000'><g class="shape" ><rect x="683.000000" y="0.000000" width="211.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="683.000000" y="0.000000" width="211.000000" height="36.000000" class="class_header fill-N1" /><text x="693.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="693.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="796.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="874.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="683.000000" x2="894.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.000000 71.000000 C 189.000000 127.000000 189.000000 155.500000 189.000000 207.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#928565738)" /><text x="189.000000" y="137.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="189.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="189.000000" dy="19.500000">just how to work the computer.</tspan></text></g><mask id="928565738" maskUnits="userSpaceOnUse" x="-100" y="-101" width="1095" height="479">
+<rect x="-100" y="-101" width="1095" height="479" fill="white"></rect>
 <rect x="0.000000" y="121.000000" width="378" height="39" fill="black"></rect>
-</mask></svg>
+</mask></svg></svg>

d2renderers/d2svg/fitToScreen.js

@@ -1,20 +0,0 @@
-window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});

d2renderers/d2svg/table.go

@@ -31,7 +31,7 @@ func tableHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, tex
 		textEl := d2themes.NewThemableElement("text")
 		textEl.X = tl.X
 		textEl.Y = tl.Y + textHeight*3/4
-		textEl.Fill = shape.Stroke
+		textEl.Fill = shape.GetFontColor()
 		textEl.ClassName = "text"
 		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx",
 			"start", 4+fontSize,

d2target/d2target.go

@@ -26,6 +26,9 @@ const (
 	MULTIPLE_OFFSET  = 10
 
 	INNER_BORDER_OFFSET = 5
+
+	BG_COLOR = color.N7
+	FG_COLOR = color.N1
 )
 
 var BorderOffset = geo.NewVector(5, 5)
@@ -38,6 +41,9 @@ type Diagram struct {
 	Shapes      []Shape      `json:"shapes"`
 	Connections []Connection `json:"connections"`
 
+	Root Shape `json:"root"`
+	// Maybe Icon can be used as a watermark in the root shape
+
 	Layers    []*Diagram `json:"layers,omitempty"`
 	Scenarios []*Diagram `json:"scenarios,omitempty"`
 	Steps     []*Diagram `json:"steps,omitempty"`
@@ -67,10 +73,10 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
 	y2 := int(math.MinInt32)
 
 	for _, targetShape := range diagram.Shapes {
-		x1 = go2.Min(x1, targetShape.Pos.X-targetShape.StrokeWidth)
-		y1 = go2.Min(y1, targetShape.Pos.Y-targetShape.StrokeWidth)
-		x2 = go2.Max(x2, targetShape.Pos.X+targetShape.Width+targetShape.StrokeWidth)
-		y2 = go2.Max(y2, targetShape.Pos.Y+targetShape.Height+targetShape.StrokeWidth)
+		x1 = go2.Min(x1, targetShape.Pos.X-int(math.Ceil(float64(targetShape.StrokeWidth)/2.)))
+		y1 = go2.Min(y1, targetShape.Pos.Y-int(math.Ceil(float64(targetShape.StrokeWidth)/2.)))
+		x2 = go2.Max(x2, targetShape.Pos.X+targetShape.Width+int(math.Ceil(float64(targetShape.StrokeWidth)/2.)))
+		y2 = go2.Max(y2, targetShape.Pos.Y+targetShape.Height+int(math.Ceil(float64(targetShape.StrokeWidth)/2.)))
 
 		if targetShape.Tooltip != "" || targetShape.Link != "" {
 			// 16 is the icon radius
@@ -128,10 +134,10 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
 
 	for _, connection := range diagram.Connections {
 		for _, point := range connection.Route {
-			x1 = go2.Min(x1, int(math.Floor(point.X)))
-			y1 = go2.Min(y1, int(math.Floor(point.Y)))
-			x2 = go2.Max(x2, int(math.Ceil(point.X)))
-			y2 = go2.Max(y2, int(math.Ceil(point.Y)))
+			x1 = go2.Min(x1, int(math.Floor(point.X))-int(math.Ceil(float64(connection.StrokeWidth)/2.)))
+			y1 = go2.Min(y1, int(math.Floor(point.Y))-int(math.Ceil(float64(connection.StrokeWidth)/2.)))
+			x2 = go2.Max(x2, int(math.Ceil(point.X))+int(math.Ceil(float64(connection.StrokeWidth)/2.)))
+			y2 = go2.Max(y2, int(math.Ceil(point.Y))+int(math.Ceil(float64(connection.StrokeWidth)/2.)))
 		}
 
 		if connection.Label != "" {
@@ -147,7 +153,11 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
 }
 
 func NewDiagram() *Diagram {
-	return &Diagram{}
+	return &Diagram{
+		Root: Shape{
+			Fill: BG_COLOR,
+		},
+	}
 }
 
 type Shape struct {
@@ -197,6 +207,20 @@ type Shape struct {
 	NeutralAccentColor   string `json:"neutralAccentColor,omitempty"`
 }
 
+func (s Shape) GetFontColor() string {
+	if s.Type == ShapeClass || s.Type == ShapeSQLTable {
+		if !color.IsThemeColor(s.Color) {
+			return s.Color
+		}
+		return s.Stroke
+	}
+	if s.Color != color.Empty {
+		return s.Color
+	}
+	return color.N1
+}
+
+// TODO remove this function, just set fields on themeable
 func (s Shape) CSSStyle() string {
 	out := ""
 
@@ -302,6 +326,13 @@ func BaseConnection() *Connection {
 	}
 }
 
+func (c Connection) GetFontColor() string {
+	if c.Color != color.Empty {
+		return c.Color
+	}
+	return color.N1
+}
+
 func (c Connection) CSSStyle() string {
 	out := ""
 

d2themes/element.go

@@ -37,6 +37,7 @@ type ThemableElement struct {
 
 	Fill            string
 	Stroke          string
+	StrokeDashArray string
 	BackgroundColor string
 	Color           string
 
@@ -82,9 +83,15 @@ func NewThemableElement(tag string) *ThemableElement {
 		"",
 		"",
 		"",
+		"",
 	}
 }
 
+func (el *ThemableElement) Copy() *ThemableElement {
+	tmp := *el
+	return &tmp
+}
+
 func (el *ThemableElement) SetTranslate(x, y float64) {
 	el.Transform = fmt.Sprintf("translate(%f %f)", x, y)
 }
@@ -139,6 +146,9 @@ func (el *ThemableElement) Render() string {
 	if el.Cy != math.MaxFloat64 {
 		out += fmt.Sprintf(` cy="%f"`, el.Cy)
 	}
+	if el.StrokeDashArray != "" {
+		out += fmt.Sprintf(` stroke-dasharray="%s"`, el.StrokeDashArray)
+	}
 
 	if len(el.D) > 0 {
 		out += fmt.Sprintf(` d="%s"`, el.D)

e2etests/e2e_test.go

@@ -40,6 +40,7 @@ func TestE2E(t *testing.T) {
 	t.Run("todo", testTodo)
 	t.Run("measured", testMeasured)
 	t.Run("unicode", testUnicode)
+	t.Run("root", testRoot)
 }
 
 func testSanity(t *testing.T) {

e2etests/regression_test.go

@@ -39,6 +39,17 @@ group.nested: {
 `,
 			expErr: "no actors declared in sequence diagram",
 		},
+		{
+			name: "class_font_style_sequence",
+			script: `shape: sequence_diagram
+a: {
+  shape: class
+  style: {
+    font-color: red
+  }
+}
+`,
+		},
 		{
 			name: "nested_steps",
 			script: `a: {

e2etests/root_test.go

@@ -0,0 +1,70 @@
+package e2etests
+
+import (
+	_ "embed"
+	"testing"
+)
+
+// testRoot tests things that affect the root, like background color
+func testRoot(t *testing.T) {
+	tcs := []testCase{
+		{
+			name: "fill",
+			script: `we all live; in a LightSteelBlue; submarine
+style.fill: LightSteelBlue
+`,
+		},
+		{
+			name: "stroke-no-width",
+			script: `we all live; in a LightSteelBlue; submarine
+style.fill: LightSteelBlue
+style.stroke: "#191970"
+`,
+		},
+		{
+			name: "stroke-width",
+			script: `we all live; in a LightSteelBlue; submarine
+style.fill: LightSteelBlue
+style.stroke: "#191970"
+style.stroke-width: 5
+`,
+		},
+		{
+			name: "even-stroke-width",
+			script: `we all live; in a LightSteelBlue; submarine
+style.fill: LightSteelBlue
+style.stroke: "#191970"
+style.stroke-width: 6
+`,
+		},
+		{
+			name: "border-radius",
+			script: `we all live; in a LightSteelBlue; submarine
+style.fill: LightSteelBlue
+style.stroke: "#191970"
+style.stroke-width: 5
+style.border-radius: 10
+`,
+		},
+		{
+			name: "stroke-dash",
+			script: `we all live; in a LightSteelBlue; submarine
+style.fill: LightSteelBlue
+style.stroke: "#191970"
+style.stroke-width: 3
+style.stroke-dash: 4
+`,
+		},
+		{
+			name: "double-border",
+			script: `we all live; in a LightSteelBlue; submarine
+style.fill: LightSteelBlue
+style.stroke: "#191970"
+style.stroke-width: 3
+style.double-border: true
+`,
+		},
+	}
+
+	runa(t, tcs)
+}

e2etests/testdata/measured/empty-class/dagre/board.exp.json

@@ -46,5 +46,45 @@
       "neutralAccentColor": "N2"
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="48" viewBox="-2 -2 116 48"><rect x="-2.000000" y="-2.000000" width="116.000000" height="48.000000" class=" fill-N7" /><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="xMidYMid 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 {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   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}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="44.000000" y2="44.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="148127623" maskUnits="userSpaceOnUse" x="-2" y="-2" width="116" height="48">
-<rect x="-2" y="-2" width="116" height="48" fill="white"></rect>
+.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}]]></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">
+<rect x="-1" y="-1" width="114" height="46" fill="white"></rect>
 
-</mask></svg>
+</mask></svg></svg>

e2etests/testdata/measured/empty-shape/dagre/board.exp.json

@@ -43,5 +43,45 @@
       "level": 1
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104" height="104" viewBox="-2 -2 104 104"><rect x="-2.000000" y="-2.000000" width="104.000000" height="104.000000" class=" fill-N7" /><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="xMidYMid 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 {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   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}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="198791073" maskUnits="userSpaceOnUse" x="-2" y="-2" width="104" height="104">
-<rect x="-2" y="-2" width="104" height="104" fill="white"></rect>
+.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}]]></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">
+<rect x="-1" y="-1" width="102" height="102" fill="white"></rect>
 
-</mask></svg>
+</mask></svg></svg>

e2etests/testdata/measured/empty-sql_table/dagre/board.exp.json

@@ -46,5 +46,45 @@
       "neutralAccentColor": "N2"
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="16" viewBox="-2 -2 54 16"><rect x="-2.000000" y="-2.000000" width="54.000000" height="16.000000" class=" fill-N7" /><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="xMidYMid 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 {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   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}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="class_header fill-N1" /></g></g><mask id="2388684491" maskUnits="userSpaceOnUse" x="-2" y="-2" width="54" height="16">
-<rect x="-2" y="-2" width="54" height="16" fill="white"></rect>
+.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}]]></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">
+<rect x="-1" y="-1" width="52" height="14" fill="white"></rect>
 
-</mask></svg>
+</mask></svg></svg>

e2etests/testdata/regression/ampersand-escape/dagre/board.exp.json

@@ -126,5 +126,45 @@
       "level": 1
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="372" height="86" viewBox="-2 -18 372 86"><rect x="-2.000000" y="-18.000000" width="372.000000" height="86.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 370 85"><svg id="d2-svg" width="370" height="85" viewBox="-1 -18 370 85"><rect x="-1.000000" y="-18.000000" width="370.000000" height="85.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,27 +20,7 @@
   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}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="h&amp;y"><g class="shape" ><rect x="0.000000" y="0.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(82 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.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}]]></style><g id="h&amp;y"><g class="shape" ><rect x="0.000000" y="0.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(82 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -53,7 +33,7 @@
 </clipPath>
 </defs>
 </svg>
-</g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="158.000000" y="0.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="192.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="287.000000" y="0.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="327.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;bar</text></g><mask id="1813696622" maskUnits="userSpaceOnUse" x="-2" y="-18" width="372" height="86">
-<rect x="-2" y="-18" width="372" height="86" fill="white"></rect>
+</g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="158.000000" y="0.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="192.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="287.000000" y="0.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="327.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;bar</text></g><mask id="1813696622" maskUnits="userSpaceOnUse" x="-1" y="-18" width="370" height="85">
+<rect x="-1" y="-18" width="370" height="85" fill="white"></rect>
 
-</mask></svg>
+</mask></svg></svg>

e2etests/testdata/regression/ampersand-escape/elk/board.exp.json

@@ -126,5 +126,45 @@
       "level": 1
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="292" height="86" viewBox="10 -6 292 86"><rect x="10.000000" y="-6.000000" width="292.000000" height="86.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 290 85"><svg id="d2-svg" width="290" height="85" viewBox="11 -6 290 85"><rect x="11.000000" y="-6.000000" width="290.000000" height="85.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,27 +20,7 @@
   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}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="h&amp;y"><g class="shape" ><rect x="12.000000" y="12.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="61.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(94 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.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}]]></style><g id="h&amp;y"><g class="shape" ><rect x="12.000000" y="12.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="61.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(94 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -53,7 +33,7 @@
 </clipPath>
 </defs>
 </svg>
-</g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="130.000000" y="12.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="164.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="219.000000" y="12.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;bar</text></g><mask id="1299322987" maskUnits="userSpaceOnUse" x="10" y="-6" width="292" height="86">
-<rect x="10" y="-6" width="292" height="86" fill="white"></rect>
+</g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="130.000000" y="12.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="164.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="219.000000" y="12.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;bar</text></g><mask id="1299322987" maskUnits="userSpaceOnUse" x="11" y="-6" width="290" height="85">
+<rect x="11" y="-6" width="290" height="85" fill="white"></rect>
 
-</mask></svg>
+</mask></svg></svg>

e2etests/testdata/regression/class_font_style_sequence/dagre/board.exp.json

@@ -0,0 +1,131 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "a",
+      "type": "class",
+      "pos": {
+        "x": 12,
+        "y": 52
+      },
+      "width": 117,
+      "height": 92,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "N1",
+      "stroke": "N7",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "red",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "B2",
+      "secondaryAccentColor": "AA2",
+      "neutralAccentColor": "N2"
+    }
+  ],
+  "connections": [
+    {
+      "id": "(a -- )[0]",
+      "src": "a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a-lifeline-end-2251863791",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 70.5,
+          "y": 144
+        },
+        {
+          "x": 70.5,
+          "y": 214
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    }
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}

e2etests/testdata/regression/class_font_style_sequence/elk/board.exp.json

@@ -0,0 +1,131 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "a",
+      "type": "class",
+      "pos": {
+        "x": 12,
+        "y": 52
+      },
+      "width": 117,
+      "height": 92,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "N1",
+      "stroke": "N7",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "red",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "B2",
+      "secondaryAccentColor": "AA2",
+      "neutralAccentColor": "N2"
+    }
+  ],
+  "connections": [
+    {
+      "id": "(a -- )[0]",
+      "src": "a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a-lifeline-end-2251863791",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 70.5,
+          "y": 144
+        },
+        {
+          "x": 70.5,
+          "y": 214
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    }
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}

e2etests/testdata/regression/code_leading_trailing_newlines/dagre/board.exp.json

@@ -123,5 +123,45 @@
       "level": 1
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="683" height="154" viewBox="-2 -2 683 154"><rect x="-2.000000" y="-2.000000" width="683.000000" height="154.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 681 152"><svg id="d2-svg" width="681" height="152" viewBox="-1 -1 681 152"><rect x="-1.000000" y="-1.000000" width="681.000000" height="152.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -45,27 +45,7 @@
   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}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="hello world"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
+.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}]]></style><g id="hello world"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">#&#160;2&#160;leading,&#160;2&#160;trailing</tspan>
 </text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve"><tspan fill="#000000" class="text-mono-bold">def</tspan>&#160;<tspan fill="#990000" class="text-mono-bold">hello</tspan>():
@@ -82,7 +62,7 @@
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve">&#160;&#160;<tspan fill="#0086b3">print</tspan>&#160;<tspan fill="#dd1144"></tspan><tspan fill="#dd1144">&quot;</tspan><tspan fill="#dd1144">world</tspan><tspan fill="#dd1144">&quot;</tspan>
 </text><text class="text-mono" x="0" y="5.000000em" xml:space="preserve">
-</text></g></g></g><mask id="60125551" maskUnits="userSpaceOnUse" x="-2" y="-2" width="683" height="154">
-<rect x="-2" y="-2" width="683" height="154" fill="white"></rect>
+</text></g></g></g><mask id="60125551" maskUnits="userSpaceOnUse" x="-1" y="-1" width="681" height="152">
+<rect x="-1" y="-1" width="681" height="152" fill="white"></rect>
 
-</mask></svg>
+</mask></svg></svg>

e2etests/testdata/regression/code_leading_trailing_newlines/elk/board.exp.json

@@ -123,5 +123,45 @@
       "level": 1
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="603" height="154" viewBox="10 10 603 154"><rect x="10.000000" y="10.000000" width="603.000000" height="154.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 601 152"><svg id="d2-svg" width="601" height="152" viewBox="11 11 601 152"><rect x="11.000000" y="11.000000" width="601.000000" height="152.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -45,27 +45,7 @@
   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}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="hello world"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
+.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}]]></style><g id="hello world"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">#&#160;2&#160;leading,&#160;2&#160;trailing</tspan>
 </text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve"><tspan fill="#000000" class="text-mono-bold">def</tspan>&#160;<tspan fill="#990000" class="text-mono-bold">hello</tspan>():
@@ -82,7 +62,7 @@
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve">&#160;&#160;<tspan fill="#0086b3">print</tspan>&#160;<tspan fill="#dd1144"></tspan><tspan fill="#dd1144">&quot;</tspan><tspan fill="#dd1144">world</tspan><tspan fill="#dd1144">&quot;</tspan>
 </text><text class="text-mono" x="0" y="5.000000em" xml:space="preserve">
-</text></g></g></g><mask id="2533851426" maskUnits="userSpaceOnUse" x="10" y="10" width="603" height="154">
-<rect x="10" y="10" width="603" height="154" fill="white"></rect>
+</text></g></g></g><mask id="2533851426" maskUnits="userSpaceOnUse" x="11" y="11" width="601" height="152">
+<rect x="11" y="11" width="601" height="152" fill="white"></rect>
 
-</mask></svg>
+</mask></svg></svg>

e2etests/testdata/regression/dagre-disconnect/dagre/board.exp.json

@@ -1718,5 +1718,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/dagre-disconnect/elk/board.exp.json

@@ -1430,5 +1430,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/dagre_broken_arrowhead/dagre/board.exp.json

@@ -394,5 +394,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/dagre_broken_arrowhead/elk/board.exp.json

@@ -383,5 +383,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/dagre_edge_label_spacing/dagre/board.exp.json

@@ -442,5 +442,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/dagre_edge_label_spacing/elk/board.exp.json

@@ -406,5 +406,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/dagre_special_ids/dagre/board.exp.json

@@ -435,5 +435,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/dagre_special_ids/elk/board.exp.json

@@ -424,5 +424,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/elk_alignment/dagre/board.exp.json

@@ -962,5 +962,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/elk_alignment/elk/board.exp.json

@@ -890,5 +890,45 @@
       "icon": null,
       "zIndex": 0
     }
-  ]
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

e2etests/testdata/regression/elk_img_empty_label_panic/dagre/board.exp.json

@@ -105,5 +105,45 @@
       "level": 1
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="292" height="132" viewBox="-2 -2 292 132"><rect x="-2.000000" y="-2.000000" width="292.000000" height="132.000000" class=" fill-N7" /><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="xMidYMid 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 {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   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}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><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="-2" y="-2" width="292" height="132">
-<rect x="-2" y="-2" width="292" height="132" fill="white"></rect>
+.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}]]></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">
+<rect x="-1" y="-1" width="290" height="130" fill="white"></rect>
 
-</mask></svg>
+</mask></svg></svg>

e2etests/testdata/regression/elk_img_empty_label_panic/elk/board.exp.json

@@ -105,5 +105,45 @@
       "level": 1
     }
   ],
-  "connections": []
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
 }