Merge branch 'master' into 120/pdf-export

2023-02-21 14:26:18 -08:00 · 2023-02-21 14:26:18 -08:00 · 0d1c3c019d
commit 0d1c3c019d
parent fe564d7147 d2a5f4093a
369 changed files with 25891 additions and 1174 deletions
--- a/README.md
+++ b/README.md
@ -226,6 +226,7 @@ let us know and we'll be happy to include it here!
 - **Confluence plugin**: [https://github.com/andrinmeier/unofficial-d2lang-confluence-plugin](https://github.com/andrinmeier/unofficial-d2lang-confluence-plugin)
 - **CIL (C#, Visual Basic, F#, C++ CLR) to D2**: [https://github.com/HugoVG/AppDiagram](https://github.com/HugoVG/AppDiagram)
 - **D2 Snippets (for text editors)**: [https://github.com/Paracelsus-Rose/D2-Language-Code-Snippets](https://github.com/Paracelsus-Rose/D2-Language-Code-Snippets)
+- **Mongo to D2**: [https://github.com/novuhq/mongo-to-D2](https://github.com/novuhq/mongo-to-D2)

 ### Misc

--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@ -1,5 +1,20 @@
 #### Features 🚀

+- Many non-Latin languages (e.g. Chinese, Japanese, Korean) are usable now that multi-byte characters are measured correctly. [#817](https://github.com/terrastruct/d2/pull/817)
+- Dimensions can be set on containers (layout engine dependent). [#845](https://github.com/terrastruct/d2/pull/845)
+
 #### Improvements 🧹

+- Cleaner watch mode logs without timestamps. [#830](https://github.com/terrastruct/d2/pull/830)
+- Remove duplicate success logs in watch mode. [#830](https://github.com/terrastruct/d2/pull/830)
+- CLI reports when a feature is incompatible with layout engine, instead of silently ignoring. [#845](https://github.com/terrastruct/d2/pull/845)
+- `near` key set to direct parent or ancestor throws an appropriate error message. [#851](https://github.com/terrastruct/d2/pull/851)
+- Dimensions and positions are able to be set from API. [#853](https://github.com/terrastruct/d2/pull/853)
+
 #### Bugfixes ⛑️
+
+- Fixes edge case where layouts with dagre show a connection from the bottom side of shapes being slightly disconnected from the shape. [#820](https://github.com/terrastruct/d2/pull/820)
+- Fixes rare compiler bug when using underscores in edges to create objects across containers. [#824](https://github.com/terrastruct/d2/pull/824)
+- Fixes rare possibility of rendered connections being hidden or cut off. [#828](https://github.com/terrastruct/d2/pull/828)
+- Creating nested children within `sql_table` and `class` shapes are now prevented (caused confusion when accidentally done). [#834](https://github.com/terrastruct/d2/pull/834)
+- Fixes graph deserialization bug. [#837](https://github.com/terrastruct/d2/pull/837)
--- a/d2ast/d2ast.go
+++ b/d2ast/d2ast.go
@ -593,8 +593,11 @@ type Key struct {
 	Value   ValueBox  `json:"value"`
 }

-// TODO there's more stuff to compare
+// TODO maybe need to compare Primary
 func (mk1 *Key) Equals(mk2 *Key) bool {
+	if mk1.Ampersand != mk2.Ampersand {
+		return false
+	}
 	if (mk1.Key == nil) != (mk2.Key == nil) {
 		return false
 	}
@ -624,6 +627,16 @@ func (mk1 *Key) Equals(mk2 *Key) bool {
 			}
 		}
 	}
+	if mk1.EdgeKey != nil {
+		if len(mk1.EdgeKey.Path) != len(mk2.EdgeKey.Path) {
+			return false
+		}
+		for i, id := range mk1.EdgeKey.Path {
+			if id.Unbox().ScalarString() != mk2.EdgeKey.Path[i].Unbox().ScalarString() {
+				return false
+			}
+		}
+	}

 	if mk1.Value.Map != nil {
 		if len(mk1.Value.Map.Nodes) != len(mk2.Value.Map.Nodes) {
--- a/d2compiler/compile.go
+++ b/d2compiler/compile.go
@ -160,6 +160,17 @@ func (c *compiler) compileField(obj *d2graph.Object, f *d2ir.Field) {
 		return
 	}

+	if obj.Parent != nil {
+		if obj.Parent.Attributes.Shape.Value == d2target.ShapeSQLTable {
+			c.errorf(f.LastRef().AST(), "sql_table columns cannot have children")
+			return
+		}
+		if obj.Parent.Attributes.Shape.Value == d2target.ShapeClass {
+			c.errorf(f.LastRef().AST(), "class fields cannot have children")
+			return
+		}
+	}
+
 	obj = obj.EnsureChild(d2graphIDA([]string{f.Name}))
 	if f.Primary() != nil {
 		c.compileLabel(obj.Attributes, f)
@ -178,7 +189,7 @@ func (c *compiler) compileField(obj *d2graph.Object, f *d2ir.Field) {
 			}
 		}
 		scopeObjIDA := d2ir.IDA(fr.Context.ScopeMap)
-		scopeObj, _ := obj.Graph.Root.HasChild(scopeObjIDA)
+		scopeObj, _ := obj.Graph.Root.HasChildIDVal(scopeObjIDA)
 		obj.References = append(obj.References, d2graph.Reference{
 			Key:          fr.KeyPath,
 			KeyPathIndex: fr.KeyPathIndex(),
@ -255,7 +266,9 @@ func (c *compiler) compileReserved(attrs *d2graph.Attributes, f *d2ir.Field) {
 		nearKey.Range = scalar.GetRange()
 		attrs.NearKey = nearKey
 	case "tooltip":
-		attrs.Tooltip = scalar.ScalarString()
+		attrs.Tooltip = &d2graph.Scalar{}
+		attrs.Tooltip.Value = scalar.ScalarString()
+		attrs.Tooltip.MapKey = f.LastPrimaryKey()
 	case "width":
 		_, err := strconv.Atoi(scalar.ScalarString())
 		if err != nil {
@ -274,8 +287,28 @@ func (c *compiler) compileReserved(attrs *d2graph.Attributes, f *d2ir.Field) {
 		attrs.Height = &d2graph.Scalar{}
 		attrs.Height.Value = scalar.ScalarString()
 		attrs.Height.MapKey = f.LastPrimaryKey()
+	case "top":
+		_, err := strconv.Atoi(scalar.ScalarString())
+		if err != nil {
+			c.errorf(scalar, "non-integer top %#v: %s", scalar.ScalarString(), err)
+			return
+		}
+		attrs.Top = &d2graph.Scalar{}
+		attrs.Top.Value = scalar.ScalarString()
+		attrs.Top.MapKey = f.LastPrimaryKey()
+	case "left":
+		_, err := strconv.Atoi(scalar.ScalarString())
+		if err != nil {
+			c.errorf(scalar, "non-integer left %#v: %s", scalar.ScalarString(), err)
+			return
+		}
+		attrs.Left = &d2graph.Scalar{}
+		attrs.Left.Value = scalar.ScalarString()
+		attrs.Left.MapKey = f.LastPrimaryKey()
 	case "link":
-		attrs.Link = scalar.ScalarString()
+		attrs.Link = &d2graph.Scalar{}
+		attrs.Link.Value = scalar.ScalarString()
+		attrs.Link.MapKey = f.LastPrimaryKey()
 	case "direction":
 		dirs := []string{"up", "down", "right", "left"}
 		if !go2.Contains(dirs, scalar.ScalarString()) {
@ -353,6 +386,10 @@ func compileStyleFieldInit(attrs *d2graph.Attributes, f *d2ir.Field) {
 		attrs.Width = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
 	case "height":
 		attrs.Height = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
+	case "top":
+		attrs.Top = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
+	case "left":
+		attrs.Left = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
 	case "double-border":
 		attrs.Style.DoubleBorder = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
 	}
@ -382,7 +419,7 @@ func (c *compiler) compileEdge(obj *d2graph.Object, e *d2ir.Edge) {
 	edge.Attributes.Label.MapKey = e.LastPrimaryKey()
 	for _, er := range e.References {
 		scopeObjIDA := d2ir.IDA(er.Context.ScopeMap)
-		scopeObj, _ := edge.Src.Graph.Root.HasChild(d2graphIDA(scopeObjIDA))
+		scopeObj, _ := edge.Src.Graph.Root.HasChildIDVal(d2graphIDA(scopeObjIDA))
 		edge.References = append(edge.References, d2graph.EdgeReference{
 			Edge:            er.Context.Edge,
 			MapKey:          er.Context.Key,
@ -559,14 +596,6 @@ func (c *compiler) validateKey(obj *d2graph.Object, f *d2ir.Field) {
 	keyword := strings.ToLower(f.Name)
 	_, isReserved := d2graph.ReservedKeywords[keyword]
 	if isReserved {
-		switch obj.Attributes.Shape.Value {
-		case d2target.ShapeSQLTable, d2target.ShapeClass:
-		default:
-			if len(obj.Children) > 0 && (f.Name == "width" || f.Name == "height") {
-				c.errorf(f.LastPrimaryKey(), fmt.Sprintf("%s cannot be used on container: %s", f.Name, obj.AbsID()))
-			}
-		}
-
 		switch obj.Attributes.Shape.Value {
 		case d2target.ShapeCircle, d2target.ShapeSquare:
 			checkEqual := (keyword == "width" && obj.Attributes.Height != nil) || (keyword == "height" && obj.Attributes.Width != nil)
@ -615,21 +644,33 @@ func (c *compiler) validateKey(obj *d2graph.Object, f *d2ir.Field) {
 func (c *compiler) validateNear(g *d2graph.Graph) {
 	for _, obj := range g.Objects {
 		if obj.Attributes.NearKey != nil {
-			_, isKey := g.Root.HasChild(d2graph.Key(obj.Attributes.NearKey))
+			nearObj, isKey := g.Root.HasChild(d2graph.Key(obj.Attributes.NearKey))
 			_, isConst := d2graph.NearConstants[d2graph.Key(obj.Attributes.NearKey)[0]]
-			if !isKey && !isConst {
-				c.errorf(obj.Attributes.NearKey, "near key %#v must be the absolute path to a shape or one of the following constants: %s", d2format.Format(obj.Attributes.NearKey), strings.Join(d2graph.NearConstantsArray, ", "))
-				continue
-			}
-			if !isKey && isConst && obj.Parent != g.Root {
-				c.errorf(obj.Attributes.NearKey, "constant near keys can only be set on root level shapes")
-				continue
-			}
-			if !isKey && isConst && len(obj.ChildrenArray) > 0 {
-				c.errorf(obj.Attributes.NearKey, "constant near keys cannot be set on shapes with children")
-				continue
-			}
-			if !isKey && isConst {
+			if isKey {
+				// Doesn't make sense to set near to an ancestor or descendant
+				nearIsAncestor := false
+				for curr := obj; curr != nil; curr = curr.Parent {
+					if curr == nearObj {
+						nearIsAncestor = true
+						break
+					}
+				}
+				if nearIsAncestor {
+					c.errorf(obj.Attributes.NearKey, "near keys cannot be set to an ancestor")
+					continue
+				}
+				nearIsDescendant := false
+				for curr := nearObj; curr != nil; curr = curr.Parent {
+					if curr == obj {
+						nearIsDescendant = true
+						break
+					}
+				}
+				if nearIsDescendant {
+					c.errorf(obj.Attributes.NearKey, "near keys cannot be set to an descendant")
+					continue
+				}
+			} else if isConst {
 				is := false
 				for _, e := range g.Edges {
 					if e.Src == obj || e.Dst == obj {
@ -641,6 +682,17 @@ func (c *compiler) validateNear(g *d2graph.Graph) {
 					c.errorf(obj.Attributes.NearKey, "constant near keys cannot be set on connected shapes")
 					continue
 				}
+				if obj.Parent != g.Root {
+					c.errorf(obj.Attributes.NearKey, "constant near keys can only be set on root level shapes")
+					continue
+				}
+				if len(obj.ChildrenArray) > 0 {
+					c.errorf(obj.Attributes.NearKey, "constant near keys cannot be set on shapes with children")
+					continue
+				}
+			} else {
+				c.errorf(obj.Attributes.NearKey, "near key %#v must be the absolute path to a shape or one of the following constants: %s", d2format.Format(obj.Attributes.NearKey), strings.Join(d2graph.NearConstantsArray, ", "))
+				continue
 			}
 		}
 	}
--- a/d2compiler/compile_test.go
+++ b/d2compiler/compile_test.go
@ -86,7 +86,6 @@ x: {
 				}
 			},
 		},
-
 		{
 			name: "dimensions_on_nonimage",

@ -114,6 +113,17 @@ x: {
 				}
 			},
 		},
+		{
+			name: "positions",
+			text: `hey: {
+	top: 200
+	left: 230
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				tassert.Equal(t, "200", g.Objects[0].Attributes.Top.Value)
+			},
+		},
 		{
 			name: "equal_dimensions_on_circle",

@ -153,8 +163,7 @@ d2/testdata/d2compiler/TestCompile/equal_dimensions_on_circle.d2:4:2: width and
 			},
 		},
 		{
-			name: "no_dimensions_on_containers",
-
+			name: "dimensions_on_containers",
 			text: `
 containers: {
 	circle container: {
@ -201,13 +210,6 @@ containers: {
 	}
 }
 `,
-			expErr: `d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:5:3: width cannot be used on container: containers.circle container
-d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:15:3: width cannot be used on container: containers.diamond container
-d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:16:3: height cannot be used on container: containers.diamond container
-d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:25:3: width cannot be used on container: containers.oval container
-d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:26:3: height cannot be used on container: containers.oval container
-d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:36:3: width cannot be used on container: containers.hexagon container
-d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:37:3: height cannot be used on container: containers.hexagon container`,
 		},
 		{
 			name: "dimension_with_style",
@ -337,6 +339,17 @@ x: {
 				tassert.Equal(t, g.Objects[0].AbsID(), g.Objects[1].References[0].ScopeObj.AbsID())
 			},
 		},
+		{
+			name: "underscore_connection",
+			text: `a: {
+  _.c.d -> _.c.b
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				tassert.Equal(t, 4, len(g.Objects))
+				tassert.Equal(t, 1, len(g.Edges))
+			},
+		},
 		{
 			name: "underscore_parent_not_root",

@ -1351,8 +1364,8 @@ x -> y: {
 				if len(g.Objects) != 1 {
 					t.Fatal(g.Objects)
 				}
-				if g.Objects[0].Attributes.Link != "https://google.com" {
-					t.Fatal(g.Objects[0].Attributes.Link)
+				if g.Objects[0].Attributes.Link.Value != "https://google.com" {
+					t.Fatal(g.Objects[0].Attributes.Link.Value)
 				}
 			},
 		},
@ -1367,8 +1380,8 @@ x -> y: {
 				if len(g.Objects) != 1 {
 					t.Fatal(g.Objects)
 				}
-				if g.Objects[0].Attributes.Link != "Overview.Untitled board 7.zzzzz" {
-					t.Fatal(g.Objects[0].Attributes.Link)
+				if g.Objects[0].Attributes.Link.Value != "Overview.Untitled board 7.zzzzz" {
+					t.Fatal(g.Objects[0].Attributes.Link.Value)
 				}
 			},
 		},
@ -1377,6 +1390,29 @@ x -> y: {

 			text: `x.near: top-center
 `,
+		},
+		{
+			name: "near-invalid",
+
+			text: `mongodb: MongoDB {
+  perspective: perspective (View) {
+    password
+  }
+
+  explanation: |md
+    perspective.model.js
+  | {
+    near: mongodb
+  }
+}
+
+a: {
+  near: a.b
+  b
+}
+`,
+			expErr: `d2/testdata/d2compiler/TestCompile/near-invalid.d2:9:11: near keys cannot be set to an ancestor
+d2/testdata/d2compiler/TestCompile/near-invalid.d2:14:9: near keys cannot be set to an descendant`,
 		},
 		{
 			name: "near_bad_constant",
@ -1472,6 +1508,36 @@ d2/testdata/d2compiler/TestCompile/errors/reserved_icon_style.d2:2:9: near key "
  shape: sql_table
  x: {p -> q}
 }`,
+			expErr: `d2/testdata/d2compiler/TestCompile/edge_in_column.d2:3:7: sql_table columns cannot have children
+d2/testdata/d2compiler/TestCompile/edge_in_column.d2:3:12: sql_table columns cannot have children`,
+		},
+		{
+			name: "no-nested-columns-sql",
+
+			text: `x: {
+  shape: sql_table
+  a -- b.b
+}`,
+			expErr: `d2/testdata/d2compiler/TestCompile/no-nested-columns-sql.d2:3:10: sql_table columns cannot have children`,
+		},
+		{
+			name: "no-nested-columns-sql-2",
+
+			text: `x: {
+  shape: sql_table
+  a
+}
+x.a.b`,
+			expErr: `d2/testdata/d2compiler/TestCompile/no-nested-columns-sql-2.d2:5:5: sql_table columns cannot have children`,
+		},
+		{
+			name: "no-nested-columns-class",
+
+			text: `x: {
+  shape: class
+  a.a
+}`,
+			expErr: `d2/testdata/d2compiler/TestCompile/no-nested-columns-class.d2:3:5: class fields cannot have children`,
 		},
 		{
 			name: "edge_to_style",
--- a/d2exporter/export.go
+++ b/d2exporter/export.go
@ -152,8 +152,12 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape {
 		}
 	}

-	shape.Tooltip = obj.Attributes.Tooltip
-	shape.Link = obj.Attributes.Link
+	if obj.Attributes.Tooltip != nil {
+		shape.Tooltip = obj.Attributes.Tooltip.Value
+	}
+	if obj.Attributes.Link != nil {
+		shape.Link = obj.Attributes.Link.Value
+	}
 	shape.Icon = obj.Attributes.Icon
 	if obj.IconPosition != nil {
 		shape.IconPosition = *obj.IconPosition
@ -232,7 +236,9 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
 		connection.Animated, _ = strconv.ParseBool(edge.Attributes.Style.Animated.Value)
 	}

-	connection.Tooltip = edge.Attributes.Tooltip
+	if edge.Attributes.Tooltip != nil {
+		connection.Tooltip = edge.Attributes.Tooltip.Value
+	}
 	connection.Icon = edge.Attributes.Icon

 	if edge.Attributes.Style.Italic != nil {
--- a/d2graph/d2graph.go
+++ b/d2graph/d2graph.go
@ -95,13 +95,15 @@ type Attributes struct {
 	Label   Scalar   `json:"label"`
 	Style   Style    `json:"style"`
 	Icon    *url.URL `json:"icon,omitempty"`
-	Tooltip string   `json:"tooltip,omitempty"`
-	Link    string   `json:"link,omitempty"`
+	Tooltip *Scalar  `json:"tooltip,omitempty"`
+	Link    *Scalar  `json:"link,omitempty"`

-	// Only applicable for images right now
 	Width  *Scalar `json:"width,omitempty"`
 	Height *Scalar `json:"height,omitempty"`

+	Top  *Scalar `json:"top,omitempty"`
+	Left *Scalar `json:"left,omitempty"`
+
 	// TODO consider separate Attributes struct for shape-specific and edge-specific
 	// Shapes only
 	NearKey  *d2ast.KeyPath `json:"near_key"`
@ -558,6 +560,38 @@ func (obj *Object) HasChild(ids []string) (*Object, bool) {
 	return child, true
 }

+// Keep in sync with HasChild.
+func (obj *Object) HasChildIDVal(ids []string) (*Object, bool) {
+	if len(ids) == 0 {
+		return obj, true
+	}
+	if len(ids) == 1 && ids[0] != "style" {
+		_, ok := ReservedKeywords[ids[0]]
+		if ok {
+			return obj, true
+		}
+	}
+
+	id := ids[0]
+	ids = ids[1:]
+
+	var child *Object
+	for _, ch2 := range obj.ChildrenArray {
+		if ch2.IDVal == id {
+			child = ch2
+			break
+		}
+	}
+	if child == nil {
+		return nil, false
+	}
+
+	if len(ids) >= 1 {
+		return child.HasChildIDVal(ids)
+	}
+	return child, true
+}
+
 func (obj *Object) HasEdge(mk *d2ast.Key) (*Edge, bool) {
 	ea, ok := obj.FindEdges(mk)
 	if !ok {
@ -1279,10 +1313,10 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 			switch shapeType {
 			case shape.TABLE_TYPE, shape.CLASS_TYPE, shape.CODE_TYPE, shape.IMAGE_TYPE:
 			default:
-				if obj.Attributes.Link != "" {
+				if obj.Attributes.Link != nil {
 					paddingX += 32
 				}
-				if obj.Attributes.Tooltip != "" {
+				if obj.Attributes.Tooltip != nil {
 					paddingX += 32
 				}
 			}
@ -1410,6 +1444,8 @@ var SimpleReservedKeywords = map[string]struct{}{
 	"width":      {},
 	"height":     {},
 	"direction":  {},
+	"top":        {},
+	"left":       {},
 }

 // ReservedKeywordHolders are reserved keywords that are meaningless on its own and exist solely to hold a set of reserved keywords
--- a/d2graph/serde.go
+++ b/d2graph/serde.go
@ -2,8 +2,10 @@ package d2graph

 import (
 	"encoding/json"
+	"fmt"
 	"strings"

+	"oss.terrastruct.com/d2/d2target"
 	"oss.terrastruct.com/util-go/go2"
 )

@ -24,10 +26,10 @@ func DeserializeGraph(bytes []byte, g *Graph) error {
 		return err
 	}

-	g.Root = &Object{
-		Graph:    g,
-		Children: make(map[string]*Object),
-	}
+	var root Object
+	convert(sg.Root, &root)
+	g.Root = &root
+	root.Graph = g

 	idToObj := make(map[string]*Object)
 	idToObj[""] = g.Root
@ -49,7 +51,7 @@ func DeserializeGraph(bytes []byte, g *Graph) error {
 			for _, id := range so["ChildrenArray"].([]interface{}) {
 				o := idToObj[id.(string)]
 				childrenArray = append(childrenArray, o)
-				children[strings.ToLower(id.(string))] = o
+				children[strings.ToLower(o.ID)] = o

 				o.Parent = idToObj[so["AbsID"].(string)]
 			}
@ -158,3 +160,316 @@ func convert[T, Q any](from T, to *Q) error {
 	}
 	return nil
 }
+
+func CompareSerializedGraph(g, other *Graph) error {
+	if len(g.Objects) != len(other.Objects) {
+		return fmt.Errorf("object count differs: g=%d, other=%d", len(g.Objects), len(other.Objects))
+	}
+
+	if len(g.Edges) != len(other.Edges) {
+		return fmt.Errorf("edge count differs: g=%d, other=%d", len(g.Edges), len(other.Edges))
+	}
+
+	if err := CompareSerializedObject(g.Root, other.Root); err != nil {
+		return fmt.Errorf("root differs: %v", err)
+	}
+
+	for i := 0; i < len(g.Objects); i++ {
+		if err := CompareSerializedObject(g.Objects[i], other.Objects[i]); err != nil {
+			return fmt.Errorf(
+				"objects differ at %d [g=%s, other=%s]: %v",
+				i,
+				g.Objects[i].ID,
+				other.Objects[i].ID,
+				err,
+			)
+		}
+	}
+
+	for i := 0; i < len(g.Edges); i++ {
+		if err := CompareSerializedEdge(g.Edges[i], other.Edges[i]); err != nil {
+			return fmt.Errorf(
+				"edges differ at %d [g=%s, other=%s]: %v",
+				i,
+				g.Edges[i].AbsID(),
+				other.Edges[i].AbsID(),
+				err,
+			)
+		}
+	}
+
+	return nil
+}
+
+func CompareSerializedObject(obj, other *Object) error {
+	if obj != nil && other == nil {
+		return fmt.Errorf("other is nil")
+	} else if obj == nil && other != nil {
+		return fmt.Errorf("obj is nil")
+	} else if obj == nil {
+		// both are nil
+		return nil
+	}
+
+	if obj.ID != other.ID {
+		return fmt.Errorf("ids differ: obj=%s, other=%s", obj.ID, other.ID)
+	}
+
+	if obj.AbsID() != other.AbsID() {
+		return fmt.Errorf("absolute ids differ: obj=%s, other=%s", obj.AbsID(), other.AbsID())
+	}
+
+	if obj.Box != nil && other.Box == nil {
+		return fmt.Errorf("other should have a box")
+	} else if obj.Box == nil && other.Box != nil {
+		return fmt.Errorf("other should not have a box")
+	} else if obj.Box != nil {
+		if obj.Width != other.Width {
+			return fmt.Errorf("widths differ: obj=%f, other=%f", obj.Width, other.Width)
+		}
+
+		if obj.Height != other.Height {
+			return fmt.Errorf("heights differ: obj=%f, other=%f", obj.Height, other.Height)
+		}
+	}
+
+	if obj.Parent != nil && other.Parent == nil {
+		return fmt.Errorf("other should have a parent")
+	} else if obj.Parent == nil && other.Parent != nil {
+		return fmt.Errorf("other should not have a parent")
+	} else if obj.Parent != nil && obj.Parent.ID != other.Parent.ID {
+		return fmt.Errorf("parent differs: obj=%s, other=%s", obj.Parent.ID, other.Parent.ID)
+	}
+
+	if len(obj.Children) != len(other.Children) {
+		return fmt.Errorf("children count differs: obj=%d, other=%d", len(obj.Children), len(other.Children))
+	}
+
+	for childID, objChild := range obj.Children {
+		if otherChild, exists := other.Children[childID]; exists {
+			if err := CompareSerializedObject(objChild, otherChild); err != nil {
+				return fmt.Errorf("children differ at key %s: %v", childID, err)
+			}
+		} else {
+			return fmt.Errorf("child %s does not exist in other", childID)
+		}
+	}
+
+	if len(obj.ChildrenArray) != len(other.ChildrenArray) {
+		return fmt.Errorf("childrenArray count differs: obj=%d, other=%d", len(obj.ChildrenArray), len(other.ChildrenArray))
+	}
+
+	for i := 0; i < len(obj.ChildrenArray); i++ {
+		if err := CompareSerializedObject(obj.ChildrenArray[i], other.ChildrenArray[i]); err != nil {
+			return fmt.Errorf("childrenArray differs at %d: %v", i, err)
+		}
+	}
+
+	if obj.Attributes != nil && other.Attributes == nil {
+		return fmt.Errorf("other should have attributes")
+	} else if obj.Attributes == nil && other.Attributes != nil {
+		return fmt.Errorf("other should not have attributes")
+	} else if obj.Attributes != nil {
+		if d2target.IsShape(obj.Attributes.Shape.Value) != d2target.IsShape(other.Attributes.Shape.Value) {
+			return fmt.Errorf(
+				"shapes differ: obj=%s, other=%s",
+				obj.Attributes.Shape.Value,
+				other.Attributes.Shape.Value,
+			)
+		}
+
+		if obj.Attributes.Icon == nil && other.Attributes.Icon != nil {
+			return fmt.Errorf("other does not have an icon")
+		} else if obj.Attributes.Icon != nil && other.Attributes.Icon == nil {
+			return fmt.Errorf("obj does not have an icon")
+		}
+
+		if obj.Attributes.Direction.Value != other.Attributes.Direction.Value {
+			return fmt.Errorf(
+				"directions differ: obj=%s, other=%s",
+				obj.Attributes.Direction.Value,
+				other.Attributes.Direction.Value,
+			)
+		}
+
+		if obj.Attributes.Label.Value != other.Attributes.Label.Value {
+			return fmt.Errorf(
+				"labels differ: obj=%s, other=%s",
+				obj.Attributes.Label.Value,
+				other.Attributes.Label.Value,
+			)
+		}
+
+		if obj.Attributes.NearKey != nil {
+			if other.Attributes.NearKey == nil {
+				return fmt.Errorf("other does not have near")
+			}
+			objKey := strings.Join(Key(obj.Attributes.NearKey), ".")
+			deserKey := strings.Join(Key(other.Attributes.NearKey), ".")
+			if objKey != deserKey {
+				return fmt.Errorf(
+					"near differs: obj=%s, other=%s",
+					objKey,
+					deserKey,
+				)
+			}
+		} else if other.Attributes.NearKey != nil {
+			return fmt.Errorf("other should not have near")
+		}
+	}
+
+	if obj.SQLTable == nil && other.SQLTable != nil {
+		return fmt.Errorf("other is not a sql table")
+	} else if obj.SQLTable != nil && other.SQLTable == nil {
+		return fmt.Errorf("obj is not a sql table")
+	}
+
+	if obj.SQLTable != nil {
+		if len(obj.SQLTable.Columns) != len(other.SQLTable.Columns) {
+			return fmt.Errorf(
+				"table columns count differ: obj=%d, other=%d",
+				len(obj.SQLTable.Columns),
+				len(other.SQLTable.Columns),
+			)
+		}
+	}
+
+	if obj.LabelWidth != nil {
+		if other.LabelWidth == nil {
+			return fmt.Errorf("other does not have a label width")
+		}
+		if *obj.LabelWidth != *other.LabelWidth {
+			return fmt.Errorf(
+				"label widths differ: obj=%d, other=%d",
+				*obj.LabelWidth,
+				*other.LabelWidth,
+			)
+		}
+	} else if other.LabelWidth != nil {
+		return fmt.Errorf("other should not have label width")
+	}
+
+	if obj.LabelHeight != nil {
+		if other.LabelHeight == nil {
+			return fmt.Errorf("other does not have a label height")
+		}
+		if *obj.LabelHeight != *other.LabelHeight {
+			return fmt.Errorf(
+				"label heights differ: obj=%d, other=%d",
+				*obj.LabelHeight,
+				*other.LabelHeight,
+			)
+		}
+	} else if other.LabelHeight != nil {
+		return fmt.Errorf("other should not have label height")
+	}
+
+	return nil
+}
+
+func CompareSerializedEdge(edge, other *Edge) error {
+	if edge.AbsID() != other.AbsID() {
+		return fmt.Errorf(
+			"absolute ids differ: edge=%s, other=%s",
+			edge.AbsID(),
+			other.AbsID(),
+		)
+	}
+
+	if edge.Src.AbsID() != other.Src.AbsID() {
+		return fmt.Errorf(
+			"sources differ: edge=%s, other=%s",
+			edge.Src.AbsID(),
+			other.Src.AbsID(),
+		)
+	}
+
+	if edge.Dst.AbsID() != other.Dst.AbsID() {
+		return fmt.Errorf(
+			"targets differ: edge=%s, other=%s",
+			edge.Dst.AbsID(),
+			other.Dst.AbsID(),
+		)
+	}
+
+	if edge.SrcArrow != other.SrcArrow {
+		return fmt.Errorf(
+			"source arrows differ: edge=%t, other=%t",
+			edge.SrcArrow,
+			other.SrcArrow,
+		)
+	}
+
+	if edge.DstArrow != other.DstArrow {
+		return fmt.Errorf(
+			"target arrows differ: edge=%t, other=%t",
+			edge.DstArrow,
+			other.DstArrow,
+		)
+	}
+
+	if edge.MinWidth != other.MinWidth {
+		return fmt.Errorf(
+			"min width differs: edge=%d, other=%d",
+			edge.MinWidth,
+			other.MinWidth,
+		)
+	}
+
+	if edge.MinHeight != other.MinHeight {
+		return fmt.Errorf(
+			"min height differs: edge=%d, other=%d",
+			edge.MinHeight,
+			other.MinHeight,
+		)
+	}
+
+	if edge.Attributes.Label.Value != other.Attributes.Label.Value {
+		return fmt.Errorf(
+			"labels differ: edge=%s, other=%s",
+			edge.Attributes.Label.Value,
+			other.Attributes.Label.Value,
+		)
+	}
+
+	if edge.LabelDimensions.Width != other.LabelDimensions.Width {
+		return fmt.Errorf(
+			"label width differs: edge=%d, other=%d",
+			edge.LabelDimensions.Width,
+			other.LabelDimensions.Width,
+		)
+	}
+
+	if edge.LabelDimensions.Height != other.LabelDimensions.Height {
+		return fmt.Errorf(
+			"label hieght differs: edge=%d, other=%d",
+			edge.LabelDimensions.Height,
+			other.LabelDimensions.Height,
+		)
+	}
+
+	if edge.SrcTableColumnIndex != nil && other.SrcTableColumnIndex == nil {
+		return fmt.Errorf("other should have src column index")
+	} else if other.SrcTableColumnIndex != nil && edge.SrcTableColumnIndex == nil {
+		return fmt.Errorf("other should not have src column index")
+	} else if other.SrcTableColumnIndex != nil {
+		edgeColumn := *edge.SrcTableColumnIndex
+		otherColumn := *other.SrcTableColumnIndex
+		if edgeColumn != otherColumn {
+			return fmt.Errorf("src column differs: edge=%d, other=%d", edgeColumn, otherColumn)
+		}
+	}
+
+	if edge.DstTableColumnIndex != nil && other.DstTableColumnIndex == nil {
+		return fmt.Errorf("other should have dst column index")
+	} else if other.DstTableColumnIndex != nil && edge.DstTableColumnIndex == nil {
+		return fmt.Errorf("other should not have dst column index")
+	} else if other.DstTableColumnIndex != nil {
+		edgeColumn := *edge.DstTableColumnIndex
+		otherColumn := *other.DstTableColumnIndex
+		if edgeColumn != otherColumn {
+			return fmt.Errorf("dst column differs: edge=%d, other=%d", edgeColumn, otherColumn)
+		}
+	}
+	return nil
+}
--- a/d2graph/serde_test.go
+++ b/d2graph/serde_test.go
@ -17,19 +17,19 @@ func TestSerialization(t *testing.T) {
 	assert.Nil(t, err)

 	asserts := func(g *d2graph.Graph) {
+		a := g.Root.ChildrenArray[0]
+		a_a := a.ChildrenArray[0]
+
 		assert.Equal(t, 4, len(g.Objects))
 		assert.Equal(t, 1, len(g.Root.ChildrenArray))
-		assert.Equal(t, 1, len(g.Root.ChildrenArray[0].ChildrenArray))
-		assert.Equal(t, 2, len(g.Root.ChildrenArray[0].ChildrenArray[0].ChildrenArray))
-		assert.Equal(t,
-			g.Root.ChildrenArray[0],
-			g.Root.ChildrenArray[0].ChildrenArray[0].Parent,
-		)
+		assert.Equal(t, 1, len(a.ChildrenArray))
+		assert.Equal(t, 2, len(a_a.ChildrenArray))
+		assert.Equal(t, a, a_a.Parent)
+		assert.Equal(t, g.Root, a.Parent)

-		assert.Equal(t,
-			g.Root,
-			g.Root.ChildrenArray[0].Parent,
-		)
+		assert.Contains(t, a.Children, "a")
+		assert.Contains(t, a_a.Children, "b")
+		assert.Contains(t, a_a.Children, "c")

 		assert.Equal(t, 1, len(g.Edges))
 		assert.Equal(t, "b", g.Edges[0].Src.ID)
--- a/d2ir/d2ir.go
+++ b/d2ir/d2ir.go
@ -379,7 +379,9 @@ func (eid *EdgeID) Match(eid2 *EdgeID) bool {
 	return true
 }

-func (eid *EdgeID) resolveUnderscores(m *Map) (*EdgeID, *Map, error) {
+// resolve resolves both underscores and commons in eid.
+// It returns the new eid, containing map adjusted for underscores and common ida.
+func (eid *EdgeID) resolve(m *Map) (_ *EdgeID, _ *Map, common []string, _ error) {
 	eid = eid.Copy()
 	maxUnderscores := go2.Max(countUnderscores(eid.SrcPath), countUnderscores(eid.DstPath))
 	for i := 0; i < maxUnderscores; i++ {
@ -397,23 +399,20 @@ func (eid *EdgeID) resolveUnderscores(m *Map) (*EdgeID, *Map, error) {
 		}
 		m = ParentMap(m)
 		if m == nil {
-			return nil, nil, errors.New("invalid underscore")
+			return nil, nil, nil, errors.New("invalid underscore")
 		}
 	}
-	return eid, m, nil
-}

-func (eid *EdgeID) trimCommon() (common []string, _ *EdgeID) {
-	eid = eid.Copy()
 	for len(eid.SrcPath) > 1 && len(eid.DstPath) > 1 {
 		if !strings.EqualFold(eid.SrcPath[0], eid.DstPath[0]) {
-			return common, eid
+			return eid, m, common, nil
 		}
 		common = append(common, eid.SrcPath[0])
 		eid.SrcPath = eid.SrcPath[1:]
 		eid.DstPath = eid.DstPath[1:]
 	}
-	return common, eid
+
+	return eid, m, common, nil
 }

 type Edge struct {
@ -732,11 +731,10 @@ func (m *Map) DeleteField(ida ...string) *Field {
 }

 func (m *Map) GetEdges(eid *EdgeID) []*Edge {
-	eid, m, err := eid.resolveUnderscores(m)
+	eid, m, common, err := eid.resolve(m)
 	if err != nil {
 		return nil
 	}
-	common, eid := eid.trimCommon()
 	if len(common) > 0 {
 		f := m.GetField(common...)
 		if f == nil {
@ -762,16 +760,12 @@ func (m *Map) CreateEdge(eid *EdgeID, refctx *RefContext) (*Edge, error) {
 		return nil, d2parser.Errorf(refctx.Edge, "cannot create edge inside edge")
 	}

-	eid, m, err := eid.resolveUnderscores(m)
+	eid, m, common, err := eid.resolve(m)
 	if err != nil {
 		return nil, d2parser.Errorf(refctx.Edge, err.Error())
 	}
-	common, eid := eid.trimCommon()
 	if len(common) > 0 {
-		tmp := *refctx.Edge.Src
-		kp := &tmp
-		kp.Path = kp.Path[:len(common)]
-		f, err := m.EnsureField(kp, nil)
+		f, err := m.EnsureField(d2ast.MakeKeyPath(common), nil)
 		if err != nil {
 			return nil, err
 		}
--- a/d2layouts/d2dagrelayout/layout.go
+++ b/d2layouts/d2dagrelayout/layout.go
@ -350,7 +350,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 					return true
 				}
 				// Edge should only move if it's not connected to the bottom side of the shrinking container
-				return p.Y != obj.TopLeft.Y+obj.Height
+				// Give some margin for error
+				return !(obj.TopLeft.Y+obj.Height-1 <= p.Y && obj.TopLeft.Y+obj.Height+1 >= p.Y && p.X != obj.TopLeft.X && p.X != (obj.TopLeft.X+obj.Width))
 			}
 			for _, e := range g.Edges {
 				if _, ok := movedEdges[e]; ok {
--- a/d2layouts/d2elklayout/layout.go
+++ b/d2layouts/d2elklayout/layout.go
@ -9,6 +9,7 @@ import (
 	_ "embed"
 	"encoding/json"
 	"fmt"
+	"math"
 	"strings"

 	"github.com/dop251/goja"
@ -102,6 +103,9 @@ type elkOpts struct {
 	ForceNodeModelOrder          bool   `json:"elk.layered.crossingMinimization.forceNodeModelOrder,omitempty"`
 	ConsiderModelOrder           string `json:"elk.layered.considerModelOrder.strategy,omitempty"`

+	NodeSizeConstraints string `json:"elk.nodeSize.constraints,omitempty"`
+	NodeSizeMinimum     string `json:"elk.nodeSize.minimum,omitempty"`
+
 	ConfigurableOpts
 }

@ -173,15 +177,17 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err

 	walk(g.Root, nil, func(obj, parent *d2graph.Object) {
 		height := obj.Height
+		width := obj.Width
 		if obj.LabelWidth != nil && obj.LabelHeight != nil {
 			if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
 				height += float64(*obj.LabelHeight) + label.PADDING
 			}
+			width = go2.Max(width, float64(*obj.LabelWidth))
 		}

 		n := &ELKNode{
 			ID:     obj.AbsID(),
-			Width:  obj.Width,
+			Width:  width,
 			Height: height,
 		}

@ -192,6 +198,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 				EdgeEdgeBetweenLayersSpacing: 50,
 				HierarchyHandling:            "INCLUDE_CHILDREN",
 				ConsiderModelOrder:           "NODES_AND_EDGES",
+				// Why is it (height, width)? I have no clue, but it works.
+				NodeSizeMinimum: fmt.Sprintf("(%d, %d)", int(math.Ceil(height)), int(math.Ceil(width))),
 				ConfigurableOpts: ConfigurableOpts{
 					NodeSpacing:     opts.NodeSpacing,
 					EdgeNodeSpacing: opts.EdgeNodeSpacing,
@ -199,6 +207,12 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 					Padding:         opts.Padding,
 				},
 			}
+			// Only set if specified.
+			// There's a bug where if it's the node label dimensions that set the NodeSizeMinimum,
+			// then suddenly it's reversed back to (width, height). I must be missing something
+			if obj.Attributes.Width != nil || obj.Attributes.Height != nil {
+				n.LayoutOptions.NodeSizeConstraints = "MINIMUM_SIZE"
+			}

 			if n.LayoutOptions.Padding == DefaultOpts.Padding {
 				// Default
--- a/d2layouts/d2layoutfeatures/d2layoutfeatures.go
+++ b/d2layouts/d2layoutfeatures/d2layoutfeatures.go
@ -0,0 +1,11 @@
+package d2layoutfeatures
+
+// When this is true, objects can set ther `near` key to another object
+// When this is false, objects can only set `near` to constants
+const NEAR_OBJECT = "near_object"
+
+// When this is true, containers can have dimensions set
+const CONTAINER_DIMENSIONS = "container_dimensions"
+
+// When this is true, objects can specify their `top` and `left` keywords
+const TOP_LEFT = "top_left"
--- a/d2layouts/d2near/layout.go
+++ b/d2layouts/d2near/layout.go
@ -98,7 +98,7 @@ func WithoutConstantNears(ctx context.Context, g *d2graph.Graph) (nears []*d2gra
 			nears = append(nears, obj)
 			g.Objects = append(g.Objects[:i], g.Objects[i+1:]...)
 			i--
-			delete(obj.Parent.Children, obj.ID)
+			delete(obj.Parent.Children, strings.ToLower(obj.ID))
 			for i := 0; i < len(obj.Parent.ChildrenArray); i++ {
 				if obj.Parent.ChildrenArray[i] == obj {
 					obj.Parent.ChildrenArray = append(obj.Parent.ChildrenArray[:i], obj.Parent.ChildrenArray[i+1:]...)
--- a/d2oracle/edit.go
+++ b/d2oracle/edit.go
@ -111,6 +111,25 @@ func _set(g *d2graph.Graph, key string, tag, value *string) error {
 	toSkip := 1

 	reserved := false
+
+	// If you're setting `(x -> y)[0].style.opacity`
+	// There's 3 cases you need to handle:
+	// 1. The edge has no map.
+	// 2. The edge has a style map with opacity not existing
+	// 3. The edge has a style map with opacity existing
+	//
+	// How each case is handled:
+	// 1. Append that mapkey to edge.
+	// 2. Append opacity to the style map
+	// 3. Set opacity
+	//
+	// There's certainly cleaner code to achieve this, but currently, there's a lot of logic to correctly scope, merge, append.
+	// The tests should be comprehensive enough for a safe refactor someday
+	//
+	// reservedKey = "style"
+	// reservedTargetKey = "opacity"
+	reservedKey := ""
+	reservedTargetKey := ""
 	if mk.Key != nil {
 		found := true
 		for _, idel := range d2graph.Key(mk.Key) {
@ -162,12 +181,14 @@ func _set(g *d2graph.Graph, key string, tag, value *string) error {
 	}

 	attrs := obj.Attributes
+	var edge *d2graph.Edge
 	if len(mk.Edges) == 1 {
 		if mk.EdgeIndex == nil {
 			appendMapKey(scope, mk)
 			return nil
 		}
-		edge, ok := obj.HasEdge(mk)
+		var ok bool
+		edge, ok = obj.HasEdge(mk)
 		if !ok {
 			return errors.New("edge not found")
 		}
@ -179,7 +200,17 @@ func _set(g *d2graph.Graph, key string, tag, value *string) error {
 			// (y -> z)[0].style.animated: true
 			if len(ref.MapKey.Edges) == 1 && ref.MapKey.EdgeIndex == nil {
 				onlyInChain = false
-				break
+			}
+			// If a ref has an exact match on this key, just change the value
+			tmp1 := *ref.MapKey
+			tmp2 := *mk
+			noVal1 := &tmp1
+			noVal2 := &tmp2
+			noVal1.Value = d2ast.ValueBox{}
+			noVal2.Value = d2ast.ValueBox{}
+			if noVal1.Equals(noVal2) {
+				ref.MapKey.Value = mk.Value
+				return nil
 			}
 		}
 		if onlyInChain {
@ -206,10 +237,26 @@ func _set(g *d2graph.Graph, key string, tag, value *string) error {
 				if ref.MapKey.Value.Map != nil {
 					foundMap = true
 					scope = ref.MapKey.Value.Map
-					// TODO when edges can have more fields, search for style
-					if len(scope.Nodes) == 1 && scope.Nodes[0].MapKey.Value.Map != nil {
-						scope = scope.Nodes[0].MapKey.Value.Map
-						mk.Key.Path = mk.Key.Path[1:]
+					for _, n := range scope.Nodes {
+						if n.MapKey.Value.Map == nil {
+							continue
+						}
+						if n.MapKey.Key == nil || len(n.MapKey.Key.Path) != 1 {
+							continue
+						}
+						if n.MapKey.Key.Path[0].Unbox().ScalarString() == mk.Key.Path[toSkip-1].Unbox().ScalarString() {
+							scope = n.MapKey.Value.Map
+							if mk.Key.Path[0].Unbox().ScalarString() == "source-arrowhead" && edge.SrcArrowhead != nil {
+								attrs = edge.SrcArrowhead
+							}
+							if mk.Key.Path[0].Unbox().ScalarString() == "target-arrowhead" && edge.DstArrowhead != nil {
+								attrs = edge.DstArrowhead
+							}
+							reservedKey = mk.Key.Path[0].Unbox().ScalarString()
+							mk.Key.Path = mk.Key.Path[1:]
+							reservedTargetKey = mk.Key.Path[0].Unbox().ScalarString()
+							break
+						}
 					}
 					break
 				}
@ -228,17 +275,79 @@ func _set(g *d2graph.Graph, key string, tag, value *string) error {
 	if reserved {
 		reservedIndex := toSkip - 1
 		if mk.Key != nil && len(mk.Key.Path) > 0 {
-			switch mk.Key.Path[reservedIndex].Unbox().ScalarString() {
+			if reservedKey == "" {
+				reservedKey = mk.Key.Path[reservedIndex].Unbox().ScalarString()
+			}
+			switch reservedKey {
 			case "shape":
 				if attrs.Shape.MapKey != nil {
 					attrs.Shape.MapKey.SetScalar(mk.Value.ScalarBox())
 					return nil
 				}
-			case "style":
-				if len(mk.Key.Path[reservedIndex:]) != 2 {
-					return errors.New("malformed style setting, expected 2 part path")
+			case "link":
+				if attrs.Link != nil && attrs.Link.MapKey != nil {
+					attrs.Link.MapKey.SetScalar(mk.Value.ScalarBox())
+					return nil
 				}
-				switch mk.Key.Path[reservedIndex+1].Unbox().ScalarString() {
+			case "tooltip":
+				if attrs.Tooltip != nil && attrs.Tooltip.MapKey != nil {
+					attrs.Tooltip.MapKey.SetScalar(mk.Value.ScalarBox())
+					return nil
+				}
+			case "width":
+				if attrs.Width != nil && attrs.Width.MapKey != nil {
+					attrs.Width.MapKey.SetScalar(mk.Value.ScalarBox())
+					return nil
+				}
+			case "height":
+				if attrs.Height != nil && attrs.Height.MapKey != nil {
+					attrs.Height.MapKey.SetScalar(mk.Value.ScalarBox())
+					return nil
+				}
+			case "top":
+				if attrs.Top != nil && attrs.Top.MapKey != nil {
+					attrs.Top.MapKey.SetScalar(mk.Value.ScalarBox())
+					return nil
+				}
+			case "left":
+				if attrs.Left != nil && attrs.Left.MapKey != nil {
+					attrs.Left.MapKey.SetScalar(mk.Value.ScalarBox())
+					return nil
+				}
+			case "source-arrowhead", "target-arrowhead":
+				if reservedKey == "source-arrowhead" {
+					attrs = edge.SrcArrowhead
+				} else {
+					attrs = edge.DstArrowhead
+				}
+				if attrs != nil {
+					if reservedTargetKey == "" {
+						if len(mk.Key.Path[reservedIndex:]) != 2 {
+							return errors.New("malformed style setting, expected 2 part path")
+						}
+						reservedTargetKey = mk.Key.Path[reservedIndex+1].Unbox().ScalarString()
+					}
+					switch reservedTargetKey {
+					case "shape":
+						if attrs.Shape.MapKey != nil {
+							attrs.Shape.MapKey.SetScalar(mk.Value.ScalarBox())
+							return nil
+						}
+					case "label":
+						if attrs.Label.MapKey != nil {
+							attrs.Label.MapKey.SetScalar(mk.Value.ScalarBox())
+							return nil
+						}
+					}
+				}
+			case "style":
+				if reservedTargetKey == "" {
+					if len(mk.Key.Path[reservedIndex:]) != 2 {
+						return errors.New("malformed style setting, expected 2 part path")
+					}
+					reservedTargetKey = mk.Key.Path[reservedIndex+1].Unbox().ScalarString()
+				}
+				switch reservedTargetKey {
 				case "opacity":
 					if attrs.Style.Opacity != nil {
 						attrs.Style.Opacity.MapKey.SetScalar(mk.Value.ScalarBox())
@ -667,6 +776,10 @@ func deleteReserved(g *d2graph.Graph, mk *d2ast.Key) (*d2graph.Graph, error) {
 			if id == "near" ||
 				id == "tooltip" ||
 				id == "icon" ||
+				id == "width" ||
+				id == "height" ||
+				id == "left" ||
+				id == "top" ||
 				id == "link" {
 				err := deleteObjField(g, obj, id)
 				if err != nil {
@ -690,7 +803,9 @@ func deleteMapField(m *d2ast.Map, field string) {
 		if n.MapKey != nil && n.MapKey.Key != nil {
 			if n.MapKey.Key.Path[0].Unbox().ScalarString() == field {
 				deleteFromMap(m, n.MapKey)
-			} else if n.MapKey.Key.Path[0].Unbox().ScalarString() == "style" {
+			} else if n.MapKey.Key.Path[0].Unbox().ScalarString() == "style" ||
+				n.MapKey.Key.Path[0].Unbox().ScalarString() == "source-arrowhead" ||
+				n.MapKey.Key.Path[0].Unbox().ScalarString() == "target-arrowhead" {
 				if n.MapKey.Value.Map != nil {
 					deleteMapField(n.MapKey.Value.Map, field)
 					if len(n.MapKey.Value.Map.Nodes) == 0 {
@ -773,13 +888,14 @@ func deleteObject(g *d2graph.Graph, key *d2ast.KeyPath, obj *d2graph.Object) (*d
 		if len(ref.MapKey.Edges) == 0 {
 			isSuffix := ref.KeyPathIndex == len(ref.Key.Path)-1
 			ref.Key.Path = append(ref.Key.Path[:ref.KeyPathIndex], ref.Key.Path[ref.KeyPathIndex+1:]...)
-			withoutReserved := go2.Filter(ref.Key.Path, func(x *d2ast.StringBox) bool {
-				_, ok := d2graph.ReservedKeywords[x.Unbox().ScalarString()]
-				return !ok
+			withoutSpecial := go2.Filter(ref.Key.Path, func(x *d2ast.StringBox) bool {
+				_, isReserved := d2graph.ReservedKeywords[x.Unbox().ScalarString()]
+				isSpecial := isReserved || x.Unbox().ScalarString() == "_"
+				return !isSpecial
 			})
 			if obj.Attributes.Shape.Value == d2target.ShapeSQLTable || obj.Attributes.Shape.Value == d2target.ShapeClass {
 				ref.MapKey.Value.Map = nil
-			} else if len(withoutReserved) == 0 {
+			} else if len(withoutSpecial) == 0 {
 				hoistRefChildren(g, key, ref)
 				deleteFromMap(ref.Scope, ref.MapKey)
 			} else if ref.MapKey.Value.Unbox() == nil &&
@ -1167,7 +1283,7 @@ func move(g *d2graph.Graph, key, newKey string) (*d2graph.Graph, error) {
 		}

 		ida := d2graph.Key(ref.Key)
-		resolvedObj, resolvedIDA, err := d2graph.ResolveUnderscoreKey(ida, obj)
+		resolvedObj, resolvedIDA, err := d2graph.ResolveUnderscoreKey(ida, ref.ScopeObj)
 		if err != nil {
 			return nil, err
 		}
@ -1839,6 +1955,12 @@ func DeleteIDDeltas(g *d2graph.Graph, key string) (deltas map[string]string, err
 	conflictNewIDs := make(map[*d2graph.Object]string)
 	conflictOldIDs := make(map[*d2graph.Object]string)
 	if mk.Key != nil {
+		ida := d2graph.Key(mk.Key)
+		// Deleting a reserved field cannot possibly have any deltas
+		if _, ok := d2graph.ReservedKeywords[ida[len(ida)-1]]; ok {
+			return nil, nil
+		}
+
 		var ok bool
 		obj, ok = g.Root.HasChild(d2graph.Key(mk.Key))
 		if !ok {
@ -2066,7 +2188,13 @@ func hasSpace(tag string) bool {
 }

 func getMostNestedRefs(obj *d2graph.Object) []d2graph.Reference {
-	most := obj.References[0]
+	var most d2graph.Reference
+	for _, ref := range obj.References {
+		if len(ref.MapKey.Edges) == 0 {
+			most = ref
+			break
+		}
+	}
 	for _, ref := range obj.References {
 		if len(ref.MapKey.Edges) != 0 {
 			continue
@ -2080,11 +2208,11 @@ func getMostNestedRefs(obj *d2graph.Object) []d2graph.Reference {
 		if err != nil {
 			mostKey = &d2ast.KeyPath{}
 		}
-		_, resolvedScopeKey, err := d2graph.ResolveUnderscoreKey(d2graph.Key(scopeKey), obj)
+		_, resolvedScopeKey, err := d2graph.ResolveUnderscoreKey(d2graph.Key(scopeKey), ref.ScopeObj)
 		if err != nil {
 			continue
 		}
-		_, resolvedMostKey, err := d2graph.ResolveUnderscoreKey(d2graph.Key(mostKey), obj)
+		_, resolvedMostKey, err := d2graph.ResolveUnderscoreKey(d2graph.Key(mostKey), ref.ScopeObj)
 		if err != nil {
 			continue
 		}
--- a/d2oracle/edit_test.go
+++ b/d2oracle/edit_test.go
@ -695,6 +695,151 @@ square.style.opacity: 0.2
 				}
 			},
 		},
+		{
+			name: "set_position",
+			text: `square
+`,
+			key:   `square.top`,
+			value: go2.Pointer(`200`),
+			exp: `square: {top: 200}
+`,
+		},
+		{
+			name: "replace_position",
+			text: `square: {
+  width: 100
+  top: 32
+	left: 44
+}
+`,
+			key:   `square.top`,
+			value: go2.Pointer(`200`),
+			exp: `square: {
+  width: 100
+  top: 200
+  left: 44
+}
+`,
+		},
+		{
+			name: "set_dimensions",
+			text: `square
+`,
+			key:   `square.width`,
+			value: go2.Pointer(`200`),
+			exp: `square: {width: 200}
+`,
+		},
+		{
+			name: "replace_dimensions",
+			text: `square: {
+  width: 100
+}
+`,
+			key:   `square.width`,
+			value: go2.Pointer(`200`),
+			exp: `square: {
+  width: 200
+}
+`,
+		},
+		{
+			name: "set_tooltip",
+			text: `square
+`,
+			key:   `square.tooltip`,
+			value: go2.Pointer(`y`),
+			exp: `square: {tooltip: y}
+`,
+		},
+		{
+			name: "replace_tooltip",
+			text: `square: {
+  tooltip: x
+}
+`,
+			key:   `square.tooltip`,
+			value: go2.Pointer(`y`),
+			exp: `square: {
+  tooltip: y
+}
+`,
+		},
+		{
+			name: "replace_link",
+			text: `square: {
+  link: https://google.com
+}
+`,
+			key:   `square.link`,
+			value: go2.Pointer(`https://apple.com`),
+			exp: `square: {
+  link: https://apple.com
+}
+`,
+		},
+		{
+			name: "replace_arrowhead",
+			text: `x -> y: {
+  target-arrowhead.shape: diamond
+}
+`,
+			key:   `(x -> y)[0].target-arrowhead.shape`,
+			value: go2.Pointer(`circle`),
+			exp: `x -> y: {
+  target-arrowhead.shape: circle
+}
+`,
+		},
+		{
+			name: "replace_arrowhead_map",
+			text: `x -> y: {
+  target-arrowhead: {
+    shape: diamond
+  }
+}
+`,
+			key:   `(x -> y)[0].target-arrowhead.shape`,
+			value: go2.Pointer(`circle`),
+			exp: `x -> y: {
+  target-arrowhead: {
+    shape: circle
+  }
+}
+`,
+		},
+		{
+			name: "replace_edge_style_map",
+			text: `x -> y: {
+  style: {
+    stroke-dash: 3
+  }
+}
+`,
+			key:   `(x -> y)[0].style.stroke-dash`,
+			value: go2.Pointer(`4`),
+			exp: `x -> y: {
+  style: {
+    stroke-dash: 4
+  }
+}
+`,
+		},
+		{
+			name: "replace_edge_style",
+			text: `x -> y: {
+  style.stroke-width: 1
+  style.stroke-dash: 4
+}
+`,
+			key:   `(x -> y)[0].style.stroke-dash`,
+			value: go2.Pointer(`3`),
+			exp: `x -> y: {
+  style.stroke-width: 1
+  style.stroke-dash: 3
+}
+`,
+		},
 		{
 			name: "label_unset",
 			text: `square: "Always try to do things in chronological order; it's less confusing that way."
@ -1024,6 +1169,57 @@ a.b -> a.c: {style.animated: true}
 			value: go2.Pointer(`true`),

 			exp: `x -> y: {style.animated: true}
+`,
+		},
+		{
+			name: "edge_set_arrowhead",
+			text: `x -> y
+`,
+			key:   `(x -> y)[0].target-arrowhead.shape`,
+			value: go2.Pointer(`diamond`),
+
+			exp: `x -> y: {target-arrowhead.shape: diamond}
+`,
+		},
+		{
+			name: "edge_replace_arrowhead",
+			text: `x -> y: {target-arrowhead.shape: circle}
+`,
+			key:   `(x -> y)[0].target-arrowhead.shape`,
+			value: go2.Pointer(`diamond`),
+
+			exp: `x -> y: {target-arrowhead.shape: diamond}
+`,
+		},
+		{
+			name: "edge_replace_arrowhead_indexed",
+			text: `x -> y
+(x -> y)[0].target-arrowhead.shape: circle
+`,
+			key:   `(x -> y)[0].target-arrowhead.shape`,
+			value: go2.Pointer(`diamond`),
+
+			exp: `x -> y
+(x -> y)[0].target-arrowhead.shape: diamond
+`,
+		},
+		{
+			name: "edge_merge_arrowhead",
+			text: `x -> y: {
+	target-arrowhead: {
+		label: 1
+  }
+}
+`,
+			key:   `(x -> y)[0].target-arrowhead.shape`,
+			value: go2.Pointer(`diamond`),
+
+			exp: `x -> y: {
+  target-arrowhead: {
+    label: 1
+    shape: diamond
+  }
+}
 `,
 		},
 		{
@ -1043,6 +1239,30 @@ a.b -> a.c: {style.animated: true}
    animated: true
  }
 }
+`,
+		},
+		{
+			name: "edge_flat_merge_arrowhead",
+			text: `x -> y -> z
+(x -> y)[0].target-arrowhead.shape: diamond
+`,
+			key:   `(x -> y)[0].target-arrowhead.shape`,
+			value: go2.Pointer(`circle`),
+
+			exp: `x -> y -> z
+(x -> y)[0].target-arrowhead.shape: circle
+`,
+		},
+		{
+			name: "edge_index_merge_style",
+			text: `x -> y -> z
+(x -> y)[0].style.opacity: 0.4
+`,
+			key:   `(x -> y)[0].style.opacity`,
+			value: go2.Pointer(`0.5`),
+
+			exp: `x -> y -> z
+(x -> y)[0].style.opacity: 0.5
 `,
 		},
 		{
@ -1755,6 +1975,20 @@ b
 				assert.JSON(t, 0, len(g.Objects[0].Children))
 			},
 		},
+		{
+			name: "out_of_newline_container",
+
+			text: `"a\n": {
+  b
+}
+`,
+			key:    `"a\n".b`,
+			newKey: `b`,
+
+			exp: `"a\n"
+b
+`,
+		},
 		{
 			name: "partial_slice",

@ -1987,6 +2221,50 @@ c: {
 				assert.JSON(t, len(g.Objects), 3)
 			},
 		},
+		{
+			name: "underscore-connection",
+
+			text: `a: {
+  b
+
+  _.c.d -> b
+}
+
+c: {
+  d
+}
+`,
+			key:    `a.b`,
+			newKey: `c.b`,
+
+			exp: `a: {
+  _.c.d -> _.c.b
+}
+
+c: {
+  d
+  b
+}
+`,
+		},
+
+		{
+			name: "nested-underscore-move-out",
+			text: `guitar: {
+	books: {
+		_._.pipe
+  }
+}
+`,
+			key:    `pipe`,
+			newKey: `guitar.pipe`,
+
+			exp: `guitar: {
+  books
+  pipe
+}
+`,
+		},
 		{
 			name: "flat_middle_container",

@ -2162,7 +2440,7 @@ a.b.c: {
 `,
 		},
 		{
-			name: "near",
+			name: "invalid-near",

 			text: `x: {
  near: y
@ -2176,6 +2454,33 @@ y
  near: x.y
  y
 }
+`,
+			expErr: `failed to move: "y" to "x.y": failed to recompile:
+x: {
+  near: x.y
+  y
+}
+
+d2/testdata/d2oracle/TestMove/invalid-near.d2:2:9: near keys cannot be set to an descendant`,
+		},
+		{
+			name: "near",
+
+			text: `x: {
+  near: y
+}
+a
+y
+`,
+			key:    `y`,
+			newKey: `a.y`,
+
+			exp: `x: {
+  near: a.y
+}
+a: {
+  y
+}
 `,
 		},
 		{
@ -3149,6 +3454,41 @@ c -> d
 			exp: `books: {
  _.pipe
 }
+`,
+		},
+		{
+			name: "only-underscore",
+
+			text: `guitar: {
+	books: {
+    _._.pipe
+  }
+}
+`,
+			key: `pipe`,
+
+			exp: `guitar: {
+  books
+}
+`,
+		},
+		{
+			name: "only-underscore-nested",
+
+			text: `guitar: {
+	books: {
+		_._.pipe: {
+      a
+    }
+  }
+}
+`,
+			key: `pipe`,
+
+			exp: `guitar: {
+  books
+}
+a
 `,
 		},
 		{
@ -3291,6 +3631,71 @@ x
 			key: `x`,

 			exp: `y
+`,
+		},
+		{
+			name: "arrowhead",
+
+			text: `x -> y: {
+  target-arrowhead.shape: diamond
+}
+`,
+			key: `(x -> y)[0].target-arrowhead`,
+
+			exp: `x -> y
+`,
+		},
+		{
+			name: "arrowhead_shape",
+
+			text: `x -> y: {
+  target-arrowhead.shape: diamond
+}
+`,
+			key: `(x -> y)[0].target-arrowhead.shape`,
+
+			exp: `x -> y
+`,
+		},
+		{
+			name: "arrowhead_label",
+
+			text: `x -> y: {
+  target-arrowhead.shape: diamond
+  target-arrowhead.label: 1
+}
+`,
+			key: `(x -> y)[0].target-arrowhead.label`,
+
+			exp: `x -> y: {
+  target-arrowhead.shape: diamond
+}
+`,
+		},
+		{
+			name: "arrowhead_map",
+
+			text: `x -> y: {
+	target-arrowhead: {
+    shape: diamond
+  }
+}
+`,
+			key: `(x -> y)[0].target-arrowhead.shape`,
+
+			exp: `x -> y
+`,
+		},
+		{
+			name: "edge-only-style",
+
+			text: `x -> y: {
+  style.stroke: red
+}
+`,
+			key: `(x -> y)[0].style.stroke`,
+
+			exp: `x -> y
 `,
 		},
 		{
@ -4339,6 +4744,30 @@ A -> B: {style.stroke: "#2b50c2"}
 			exp: `A: {style.stroke: "#000e3d"}
 B
 A -> B
+`,
+		},
+		{
+			name: "width",
+
+			text: `x: {
+  width: 200
+}
+`,
+			key: `x.width`,
+
+			exp: `x
+`,
+		},
+		{
+			name: "left",
+
+			text: `x: {
+  left: 200
+}
+`,
+			key: `x.left`,
+
+			exp: `x
 `,
 		},
 	}
@ -4701,6 +5130,46 @@ x.y.z.w.e.p.l -> x.y.z.1.2.3.4

 			exp: `{
  "x.x": "x"
+}`,
+		},
+		{
+			name: "nested-height",
+
+			text: `x: {
+  a -> b
+  height: 200
+}
+`,
+			key: `x.height`,
+
+			exp: `null`,
+		},
+		{
+			name: "edge-style",
+
+			text: `x <-> y: {
+  target-arrowhead: circle
+  source-arrowhead: diamond
+}
+`,
+			key: `(x <-> y)[0].target-arrowhead`,
+
+			exp: `null`,
+		},
+		{
+			name: "only-reserved",
+			text: `guitar: {
+	books: {
+		_._.pipe: {
+      a
+    }
+  }
+}
+`,
+			key: `pipe`,
+
+			exp: `{
+  "pipe.a": "a"
 }`,
 		},
 		{
--- a/d2plugin/exec.go
+++ b/d2plugin/exec.go
@ -119,6 +119,9 @@ func (p *execPlugin) Info(ctx context.Context) (_ *PluginInfo, err error) {
 		return nil, fmt.Errorf("failed to unmarshal json: %w", err)
 	}

+	info.Type = "binary"
+	info.Path = p.path
+
 	p.info = &info
 	return &info, nil
 }
--- a/d2plugin/plugin.go
+++ b/d2plugin/plugin.go
@ -71,11 +71,14 @@ type PluginInfo struct {
 	ShortHelp string `json:"shortHelp"`
 	LongHelp  string `json:"longHelp"`

-	// These two are set by ListPlugins and not the plugin itself.
+	// Set to bundled when returning from the plugin.
+	// execPlugin will set to binary when used.
 	// bundled | binary
 	Type string `json:"type"`
 	// If Type == binary then this contains the absolute path to the binary.
 	Path string `json:"path"`
+
+	Features []PluginFeature `json:"features"`
 }

 const binaryPrefix = "d2plugin-"
@ -122,12 +125,6 @@ func ListPluginInfos(ctx context.Context, ps []Plugin) ([]*PluginInfo, error) {
 		if err != nil {
 			return nil, err
 		}
-		if ep, ok := p.(*execPlugin); ok {
-			info.Type = "binary"
-			info.Path = ep.path
-		} else {
-			info.Type = "bundled"
-		}
 		infoSlice = append(infoSlice, info)
 	}

--- a/d2plugin/plugin_dagre.go
+++ b/d2plugin/plugin_dagre.go
@ -66,6 +66,8 @@ func (p dagrePlugin) Info(ctx context.Context) (*PluginInfo, error) {

 	return &PluginInfo{
 		Name:      "dagre",
+		Type:      "bundled",
+		Features:  []PluginFeature{},
 		ShortHelp: "The directed graph layout library Dagre",
 		LongHelp: fmt.Sprintf(`dagre is a directed graph layout library for JavaScript.
 See https://d2lang.com/tour/dagre for more.
--- a/d2plugin/plugin_elk.go
+++ b/d2plugin/plugin_elk.go
@ -85,7 +85,11 @@ func (p elkPlugin) Info(ctx context.Context) (*PluginInfo, error) {
 		f.AddToOpts(opts)
 	}
 	return &PluginInfo{
-		Name:      "elk",
+		Name: "elk",
+		Type: "bundled",
+		Features: []PluginFeature{
+			CONTAINER_DIMENSIONS,
+		},
 		ShortHelp: "Eclipse Layout Kernel (ELK) with the Layered algorithm.",
 		LongHelp: fmt.Sprintf(`ELK is a layout engine offered by Eclipse.
 Originally written in Java, it has been ported to Javascript and cross-compiled into D2.
--- a/d2plugin/plugin_features.go
+++ b/d2plugin/plugin_features.go
@ -0,0 +1,54 @@
+package d2plugin
+
+import (
+	"fmt"
+
+	"oss.terrastruct.com/d2/d2graph"
+)
+
+type PluginFeature string
+
+// When this is true, objects can set ther `near` key to another object
+// When this is false, objects can only set `near` to constants
+const NEAR_OBJECT PluginFeature = "near_object"
+
+// When this is true, containers can have dimensions set
+const CONTAINER_DIMENSIONS PluginFeature = "container_dimensions"
+
+// When this is true, objects can specify their `top` and `left` keywords
+const TOP_LEFT PluginFeature = "top_left"
+
+func FeatureSupportCheck(info *PluginInfo, g *d2graph.Graph) error {
+	// Older version of plugin. Skip checking.
+	if info.Features == nil {
+		return nil
+	}
+
+	featureMap := make(map[PluginFeature]struct{}, len(info.Features))
+	for _, f := range info.Features {
+		featureMap[f] = struct{}{}
+	}
+
+	for _, obj := range g.Objects {
+		if obj.Attributes.Top != nil || obj.Attributes.Left != nil {
+			if _, ok := featureMap[TOP_LEFT]; !ok {
+				return fmt.Errorf(`Object "%s" has attribute "top" and/or "left" set, but layout engine "%s" does not support locked positions.`, obj.AbsID(), info.Name)
+			}
+		}
+		if (obj.Attributes.Width != nil || obj.Attributes.Height != nil) && len(obj.ChildrenArray) > 0 {
+			if _, ok := featureMap[CONTAINER_DIMENSIONS]; !ok {
+				return fmt.Errorf(`Object "%s" has attribute "width" and/or "height" set, but layout engine "%s" does not support dimensions set on containers.`, obj.AbsID(), info.Name)
+			}
+		}
+
+		if obj.Attributes.NearKey != nil {
+			_, isKey := g.Root.HasChild(d2graph.Key(obj.Attributes.NearKey))
+			if isKey {
+				if _, ok := featureMap[NEAR_OBJECT]; !ok {
+					return fmt.Errorf(`Object "%s" has "near" set to another object, but layout engine "%s" only supports constant values for "near".`, obj.AbsID(), info.Name)
+				}
+			}
+		}
+	}
+	return nil
+}
--- a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
--- a/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
@ -39,8 +39,8 @@ width="565" height="683" viewBox="-102 -118 565 683"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17" y="0" width="85" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="59.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://terrastruct.com" xlink:href="https://terrastruct.com"><g id="y"><g class="shape" ><rect x="0" y="166" width="118" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="59.000000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3883830923)"/></g><mask id="3883830923" maskUnits="userSpaceOnUse" x="-100" y="-100" width="338" height="452">
-<rect x="-100" y="-100" width="338" height="452" fill="white"></rect>
+]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17" y="0" width="85" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="59.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://terrastruct.com" xlink:href="https://terrastruct.com"><g id="y"><g class="shape" ><rect x="0" y="166" width="118" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="59.000000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3883830923)"/></g><mask id="3883830923" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
+<rect x="-102" y="-118" width="338" height="452" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .appendix-icon {
--- a/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
@ -39,8 +39,8 @@ width="566" height="631" viewBox="-102 -118 566 631"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="x"><g class="shape" ><rect x="1" y="0" width="85" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="43.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(70 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0" y="166" width="86" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="43.000000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2888388714)"/></g><mask id="2888388714" maskUnits="userSpaceOnUse" x="-100" y="-100" width="306" height="452">
-<rect x="-100" y="-100" width="306" height="452" fill="white"></rect>
+]]></script><g id="x"><g class="shape" ><rect x="1" y="0" width="85" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="43.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(70 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0" y="166" width="86" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="43.000000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2888388714)"/></g><mask id="2888388714" maskUnits="userSpaceOnUse" x="-102" y="-118" width="306" height="452">
+<rect x="-102" y="-118" width="306" height="452" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .appendix-icon {
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@ -64,10 +64,12 @@ type RenderOpts struct {
 	Sketch bool
 }

-func setViewbox(writer io.Writer, diagram *d2target.Diagram, pad int) (width int, height int) {
+func setViewbox(writer io.Writer, diagram *d2target.Diagram, pad int) (left, top, width, height int) {
 	tl, br := diagram.BoundingBox()
-	w := br.X - tl.X + pad*2
-	h := br.Y - tl.Y + pad*2
+	left = tl.X - pad
+	top = tl.Y - pad
+	width = br.X - tl.X + pad*2
+	height = br.Y - tl.Y + pad*2
 	// TODO minify

 	// TODO background stuff. e.g. dotted, grid, colors
@ -76,9 +78,9 @@ func setViewbox(writer io.Writer, diagram *d2target.Diagram, pad int) (width int
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="%d" height="%d" viewBox="%d %d %d %d">`, w, h, tl.X-pad, tl.Y-pad, w, h)
+width="%d" height="%d" viewBox="%d %d %d %d">`, width, height, left, top, width, height)

-	return w, h
+	return left, top, width, height
 }

 func arrowheadMarkerID(isTarget bool, connection d2target.Connection) string {
@ -1263,7 +1265,8 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	}

 	buf := &bytes.Buffer{}
-	w, h := setViewbox(buf, diagram, pad)
+
+	left, top, w, h := setViewbox(buf, diagram, pad)

 	styleCSS2 := ""
 	if sketchRunner != nil {
@ -1348,10 +1351,10 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	// Note: we always want this since we reference it on connections even if there end up being no masked labels
 	fmt.Fprint(buf, strings.Join([]string{
 		fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="%d" y="%d" width="%d" height="%d">`,
-			labelMaskID, -pad, -pad, w, h,
+			labelMaskID, left, top, w, h,
 		),
 		fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" fill="white"></rect>`,
-			-pad, -pad, w, h,
+			left, top, w, h,
 		),
 		strings.Join(labelMasks, "\n"),
 		`</mask>`,
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@ -1,8 +1,8 @@
 # Contributing

 <!-- toc -->
+- <a href="#welcome" id="toc-welcome">Welcome</a>
 - <a href="#ci" id="toc-ci">CI</a>
- <a href="#flow" id="toc-flow">Flow</a>
 - <a href="#logistics" id="toc-logistics">Logistics</a>
 - <a href="#dev" id="toc-dev">Dev</a>
  - <a href="#content" id="toc-content">Content</a>
@ -10,42 +10,68 @@
  - <a href="#documentation" id="toc-documentation">Documentation</a>
  - <a href="#questions" id="toc-questions">Questions</a>

+## Welcome
+
+D2's [long-term mission](https://d2lang.com/tour/future/) is to significantly reduce the
+amount of time and effort it takes to create and maintain high-quality diagrams for every
+software team. We started this because we love the idea of creating diagrams with text --
+but it was clear the existing solutions were inadequete in their state and speed of
+execution for this idea to be widely usable.
+
+We've tried our best to avoid the mistakes of the past and take inspiration from the most
+successful modern programming and configuration languages. D2 has built up each step of
+the text-to-diagram pipeline from scratch, rethinking each one from first principles, from
+the dead simple syntax, to the readable compiler, our own SVG renderer, etc.
+
+D2 is committed to making something people want to use. That means contributions don't
+only have to be in the form of pull requests. Your bug reports, plugins, examples,
+discussions of new ideas, help a great deal.
+
+If you'd like to get involved, we're also committed to helping you merge that first pull
+request. You should be able to freely pick up Issues tagged as "good first issue". If you
+need help getting started, please don't hesitate to pop into Discord -- as long as you
+want to help, we'll find the perfect task (complexity matches your appetite and
+programming experience, in an area you're interested in, etc).
+
 ## CI

 Most of D2's CI is open sourced in its own
-[repository](https://github.com/terrastruct/ci). You can find commands in the Github
-workflows. E.g. run `./make.sh fmt` to run the formatter. Please make sure all CI is
-passing for any PRs.
-
-Most of the CI scripts rely on a submodule shared between many D2 repositories:
-[https://github.com/terrastruct/ci](https://github.com/terrastruct/ci). You should fetch
-the submodule whenever it differs:
-
-```sh
-git submodule update --recursive
-```
-
-If running for the first time for a repo (e.g. new clone), add `--init`:
+[repository](https://github.com/terrastruct/ci), included as a submodule. After you clone
+D2, make sure you initialize the submodules:

 ```sh
 git submodule update --init --recursive
 ```

-## Flow
+`./make.sh` runs everything. Subcommands to run individual parts of the CI:

-The simplified D2 flow at a package level looks like:
+- `./make.sh fmt`
+- `./make.sh lint`
+- `./make.sh test`
+- `./make.sh race`
+- `./make.sh build`

-<img src="./assets/flow.svg" alt="D2 flow" height="700" />
+Here's what a successful run should look like:
+
+<img width="1582" alt="Screen Shot 2023-02-19 at 7 46 34 PM" src="https://user-images.githubusercontent.com/3120367/220004975-7a218b82-c5c1-4a71-b2bb-8695bbfd600c.png">
+
+
+Please make sure CI is passing for any PRs submitted for review.
+
+Be sure to update the submodule whenever there are changes:
+
+```sh
+git submodule update --recursive
+```

 ## Logistics

 - Use Go 1.18. Go 1.19's autofmt inexplicably strips spacing from ASCII art in comments.
+  We're working on it.
 - Please sign your commits
  ([https://github.com/terrastruct/d2/pull/557#issuecomment-1367468730](https://github.com/terrastruct/d2/pull/557#issuecomment-1367468730)).
 - D2 uses Issues as TODOs. No auto-closing on staleness.
 - Branch off `master`.
- Prefix pull request titles with a short descriptor of the domain, e.g. `d2renderer: Add
-  x`.
 - If there's an Issue related, include it by adding "[one-word] #[issue]", e.g. "Fixes
  #123" somewhere in the description.
 - Whenever possible and relevant, include a screenshot or screen-recording.
@ -54,25 +80,37 @@ The simplified D2 flow at a package level looks like:

 ### Content

-Please choose an Issue with a "TODO" label. If you'd like to propose new functionality or
-change to current functionality, please create an Issue first with a proposal. When you
-start work on an Issue, please leave a comment so others know that it's being worked on.
+Unless you've contributed before, it's safest to choose an Issue with a "good first issue"
+label. If you'd like to propose new functionality or change to current functionality,
+please create an Issue first with a proposal. When you start work on an Issue, please
+leave a comment so others know that it's being worked on.

 ### Tests

-All code changes must include tests. D2 mostly has functional tests, and uses
-[diff](https://github.com/terrastruct/diff) as a framework that gives Git-style
-comparisons of expected vs actual output for each stage. There are ample examples in each
-package of this -- try changing some test and run it to see.
+D2 has extensive tests, and all code changes must include tests.

 With the exception of changes to the renderer, all code should include a package-specific
-test. If it's a visual change, an e2e test should accompany.
+test. If it's a visual change, an end-to-end (e2e) test should accompany.
+
+Let's say I make some code changes. I can easily see how this affects the end result by
+running:
+
+```
+./ci/e2ereport.sh -delta
+```
+
+This gives me a nice HMTL output of what the test expected vs what it got (this was a PR
+fixing multi-byte character labels):
+
+![screencapture-file-Users-alexanderwang-dev-alixander-d2-e2etests-out-e2e-report-html-2023-02-14-10_15_07](https://user-images.githubusercontent.com/3120367/218822836-bcc517f2-ae3e-4e0d-83f6-2cbaa2fd9275.png)
+
+Run `./ci/e2ereport.sh -help` for flags, including how to get deltas for a single test.

 If you're testing labels and strings, it's encouraged to use 1-letter strings (`x`) in small
 functional tests to minimally pinpoint issues. If you are testing something that exercises
 variations in strings, or want to mimic more realistic diagram text, it's encouraged you
 generate random strings and words from `fortune`. It gives a good range of the English
-language. Sometimes it gives controversial sentences -- don't use those.
+language. (Sometimes it gives controversial sentences -- don't use those.)

 Script to generate one line of random text:
 ```
--- a/e2etests/e2e_test.go
+++ b/e2etests/e2e_test.go
@ -38,6 +38,7 @@ func TestE2E(t *testing.T) {
 	t.Run("regression", testRegression)
 	t.Run("todo", testTodo)
 	t.Run("measured", testMeasured)
+	t.Run("unicode", testUnicode)
 }

 func testSanity(t *testing.T) {
@ -114,6 +115,7 @@ func serde(t *testing.T, tc testCase, ruler *textmeasure.Ruler) {
 	var newG d2graph.Graph
 	err = d2graph.DeserializeGraph(b, &newG)
 	trequire.Nil(t, err)
+	trequire.Nil(t, d2graph.CompareSerializedGraph(g, &newG))
 }

 func run(t *testing.T, tc testCase) {
--- a/e2etests/regression_test.go
+++ b/e2etests/regression_test.go
@ -489,6 +489,32 @@ group: {
 }
 &foo
 &&bar
+`,
+		},
+		{
+			name: "dagre-disconnect",
+			script: `a: {
+  k.t -> f.i
+  f.g -> _.s.n
+}
+k
+k.s <-> u.o
+h.m.s -> a.f.g
+
+a.f.j -> u.s.j
+u: {
+  c -> _.s.z.c
+}
+
+s: {
+  n: {
+    style.stroke: red
+    f
+  }
+}
+
+s.n -> y.r: {style.stroke-width: 8; style.stroke: red}
+y.r -> a.g.i: 1\n2\n3\n4
 `,
 		},
 	}
--- a/e2etests/stable_test.go
+++ b/e2etests/stable_test.go
@ -165,9 +165,9 @@ d -> g.e -> f -> g -> d.h
 		},
 		{
 			name: "one_three_one_container",
-			script: `top.start -> a
-top.start -> b
-top.start -> c
+			script: `top2.start -> a
+top2.start -> b
+top2.start -> c
 a -> bottom.end
 b -> bottom.end
 c -> bottom.end
@ -1576,13 +1576,13 @@ container: {
 		icon: https://icons.terrastruct.com/essentials/004-picture.svg
 	}

-	left: {
+	left2: {
 		root: {
 			shape: image
 			icon: https://icons.terrastruct.com/essentials/004-picture.svg
 		}
 		inner: {
-			left: {
+			left2: {
 				shape: image
 				icon: https://icons.terrastruct.com/essentials/004-picture.svg
 			}
@ -1591,8 +1591,8 @@ container: {
 				icon: https://icons.terrastruct.com/essentials/004-picture.svg
 			}
 		}
-		root -> inner.left: {
-			label: to inner left
+		root -> inner.left2: {
+			label: to inner left2
 		}
 		root -> inner.right: {
 			label: to inner right
@ -1605,7 +1605,7 @@ container: {
 			icon: https://icons.terrastruct.com/essentials/004-picture.svg
 		}
 		inner: {
-			left: {
+			left2: {
 				shape: image
 				icon: https://icons.terrastruct.com/essentials/004-picture.svg
 			}
@ -1614,16 +1614,16 @@ container: {
 				icon: https://icons.terrastruct.com/essentials/004-picture.svg
 			}
 		}
-		root -> inner.left: {
-			label: to inner left
+		root -> inner.left2: {
+			label: to inner left2
 		}
 		root -> inner.right: {
 			label: to inner right
 		}
 	}

-	root -> left.root: {
-		label: to left container root
+	root -> left2.root: {
+		label: to left2 container root
 	}

 	root -> right.root: {
@ -1767,6 +1767,30 @@ class.height: 512
 users.height: 512
 code.height: 512
 package.height: 512
+`,
+		},
+		{
+			name: "container_dimensions",
+			script: `a: {
+  width: 500
+  b -> c
+	b.width: 400
+	c.width: 600
+}
+
+b: {
+  width: 700
+  b -> c
+	e: {
+		height: 300
+	}
+}
+
+c: {
+  width: 200
+  height: 300
+  a
+}
 `,
 		},
 		{
--- a/e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg
@ -39,7 +39,7 @@ width="316" height="248" viewBox="-102 -102 316 248"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect class="shape" x="0" y="0" width="112" height="44" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="112.000000" height="44.000000" fill="#0A0F25" /><line x1="0.000000" y1="44.000000" x2="112.000000" y2="44.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="2019199647" maskUnits="userSpaceOnUse" x="-100" y="-100" width="316" height="248">
-<rect x="-100" y="-100" width="316" height="248" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect class="shape" x="0" y="0" width="112" height="44" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="112.000000" height="44.000000" fill="#0A0F25" /><line x1="0.000000" y1="44.000000" x2="112.000000" y2="44.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="2019199647" maskUnits="userSpaceOnUse" x="-102" y="-102" width="316" height="248">
+<rect x="-102" y="-102" width="316" height="248" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg
@ -39,7 +39,7 @@ width="304" height="304" viewBox="-102 -102 304 304"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g></g><mask id="4175712569" maskUnits="userSpaceOnUse" x="-100" y="-100" width="304" height="304">
-<rect x="-100" y="-100" width="304" height="304" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g></g><mask id="4175712569" maskUnits="userSpaceOnUse" x="-102" y="-102" width="304" height="304">
+<rect x="-102" y="-102" width="304" height="304" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg
@ -39,7 +39,7 @@ width="254" height="216" viewBox="-102 -102 254 216"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect class="shape" x="0" y="0" width="50" height="12" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="50.000000" height="12.000000" fill="#0A0F25" /></g></g><mask id="1023975809" maskUnits="userSpaceOnUse" x="-100" y="-100" width="254" height="216">
-<rect x="-100" y="-100" width="254" height="216" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect class="shape" x="0" y="0" width="50" height="12" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="50.000000" height="12.000000" fill="#0A0F25" /></g></g><mask id="1023975809" maskUnits="userSpaceOnUse" x="-102" y="-102" width="254" height="216">
+<rect x="-102" y="-102" width="254" height="216" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg
@ -52,8 +52,8 @@ width="572" height="286" viewBox="-102 -118 572 286"><style type="text/css">
 </clipPath>
 </defs>
 </svg>
-</g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="158" y="0" width="69" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="192.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="287" y="0" width="81" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="327.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">&amp;bar</text></g><mask id="2873271232" maskUnits="userSpaceOnUse" x="-100" y="-100" width="572" height="286">
-<rect x="-100" y="-100" width="572" height="286" fill="white"></rect>
+</g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="158" y="0" width="69" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="192.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="287" y="0" width="81" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="327.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">&amp;bar</text></g><mask id="2873271232" maskUnits="userSpaceOnUse" x="-102" y="-118" width="572" height="286">
+<rect x="-102" y="-118" width="572" height="286" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .appendix-icon {
--- a/e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg
@ -52,8 +52,8 @@ width="492" height="286" viewBox="-90 -106 492 286"><style type="text/css">
 </clipPath>
 </defs>
 </svg>
-</g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="130" y="12" width="69" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="164.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="219" y="12" width="81" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="259.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">&amp;bar</text></g><mask id="1531486957" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="286">
-<rect x="-100" y="-100" width="492" height="286" fill="white"></rect>
+</g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="130" y="12" width="69" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="164.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="219" y="12" width="81" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="259.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">&amp;bar</text></g><mask id="1531486957" maskUnits="userSpaceOnUse" x="-90" y="-106" width="492" height="286">
+<rect x="-90" y="-106" width="492" height="286" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .appendix-icon {
--- a/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
@ -56,8 +56,8 @@ width="883" height="354" viewBox="-102 -102 883 354"><style type="text/css">
 </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="2314789821" maskUnits="userSpaceOnUse" x="-100" y="-100" width="883" height="354">
-<rect x="-100" y="-100" width="883" height="354" fill="white"></rect>
+</text></g></g></g><mask id="2314789821" maskUnits="userSpaceOnUse" x="-102" y="-102" width="883" height="354">
+<rect x="-102" y="-102" width="883" height="354" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-mono {
--- a/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
@ -56,8 +56,8 @@ width="803" height="354" viewBox="-90 -90 803 354"><style type="text/css">
 </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="2399438644" maskUnits="userSpaceOnUse" x="-100" y="-100" width="803" height="354">
-<rect x="-100" y="-100" width="803" height="354" fill="white"></rect>
+</text></g></g></g><mask id="2399438644" maskUnits="userSpaceOnUse" x="-90" y="-90" width="803" height="354">
+<rect x="-90" y="-90" width="803" height="354" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-mono {
--- a/e2etests/testdata/regression/dagre-disconnect/dagre/board.exp.json
+++ b/e2etests/testdata/regression/dagre-disconnect/dagre/board.exp.json
--- a/e2etests/testdata/regression/dagre-disconnect/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre-disconnect/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/dagre-disconnect/elk/board.exp.json
+++ b/e2etests/testdata/regression/dagre-disconnect/elk/board.exp.json
--- a/e2etests/testdata/regression/dagre-disconnect/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre-disconnect/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="562" height="730" viewBox="-102 -100 562 730"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="0" y="41" width="358" height="487" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="179.000000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="75" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="66.500000" y="113.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="23" y="355" width="298" height="139" style="fill:#EDF0FD;stroke:white;stroke-width:2;" /></g><text class="text" x="172.000000" y="343.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c</text></g><g id="a.1"><g class="shape" ><rect x="153" y="75" width="52" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="179.000000" y="113.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="a.2"><g class="shape" ><rect x="265" y="75" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="291.500000" y="113.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">2</text></g><g id="a.c.d"><g class="shape" ><rect x="152" y="391" width="54" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="179.000000" y="429.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="red" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 66.500000 144.000000 C 66.500000 212.400000 66.700000 326.400000 67.391931 352.001460" class="connection" style="fill:none;stroke:red;stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#3075455218)"/><text class="text-italic" x="67.000000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:red"><tspan x="67.000000" dy="0.000000">line 1</tspan><tspan x="67.000000" dy="17.250000">line 2</tspan><tspan x="67.000000" dy="17.250000">line 3</tspan><tspan x="67.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 179.000000 144.000000 C 179.000000 212.400000 179.000000 326.400000 179.000000 352.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3075455218)"/></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 291.500000 146.000000 C 291.500000 212.400000 291.300000 326.400000 290.608069 352.001460" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3075455218)"/></g><mask id="3075455218" maskUnits="userSpaceOnUse" x="-100" y="-100" width="562" height="730">
-<rect x="-100" y="-100" width="562" height="730" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="0" y="41" width="358" height="487" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="179.000000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="75" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="66.500000" y="113.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="23" y="355" width="298" height="139" style="fill:#EDF0FD;stroke:white;stroke-width:2;" /></g><text class="text" x="172.000000" y="343.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c</text></g><g id="a.1"><g class="shape" ><rect x="153" y="75" width="52" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="179.000000" y="113.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="a.2"><g class="shape" ><rect x="265" y="75" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="291.500000" y="113.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">2</text></g><g id="a.c.d"><g class="shape" ><rect x="152" y="391" width="54" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="179.000000" y="429.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="red" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 66.500000 144.000000 C 66.500000 212.400000 66.700000 326.400000 67.391931 352.001460" class="connection" style="fill:none;stroke:red;stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#3075455218)"/><text class="text-italic" x="67.000000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:red"><tspan x="67.000000" dy="0.000000">line 1</tspan><tspan x="67.000000" dy="17.250000">line 2</tspan><tspan x="67.000000" dy="17.250000">line 3</tspan><tspan x="67.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 179.000000 144.000000 C 179.000000 212.400000 179.000000 326.400000 179.000000 352.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3075455218)"/></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 291.500000 146.000000 C 291.500000 212.400000 291.300000 326.400000 290.608069 352.001460" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3075455218)"/></g><mask id="3075455218" maskUnits="userSpaceOnUse" x="-102" y="-100" width="562" height="730">
+<rect x="-102" y="-100" width="562" height="730" fill="white"></rect>
 <rect x="49.000000" y="215.000000" width="36" height="69" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/dagre_broken_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_broken_arrowhead/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="494" height="755" viewBox="-90 -90 494 755"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="290" height="551" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="157.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="62" y="62" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="88.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="76" y="347" width="154" height="166" style="fill:#EDF0FD;stroke:white;stroke-width:2;" /></g><text class="text" x="153.000000" y="376.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c</text></g><g id="a.1"><g class="shape" ><rect x="127" y="201" width="52" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="153.000000" y="239.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="a.2"><g class="shape" ><rect x="199" y="201" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="225.500000" y="239.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">2</text></g><g id="a.c.d"><g class="shape" ><rect x="126" y="397" width="54" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="153.000000" y="435.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="red" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 88.500000 130.000000 L 88.500000 297.000000 S 88.500000 307.000000 98.500000 307.000000 L 105.000000 307.000000 S 115.000000 307.000000 115.000000 317.000000 L 115.000000 343.000000" class="connection" style="fill:none;stroke:red;stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#1504590825)"/><text class="text-italic" x="89.000000" y="232.000000" style="text-anchor:middle;font-size:16px;fill:red"><tspan x="89.000000" dy="0.000000">line 1</tspan><tspan x="89.000000" dy="17.250000">line 2</tspan><tspan x="89.000000" dy="17.250000">line 3</tspan><tspan x="89.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 153.500000 269.000000 L 153.500000 343.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1504590825)"/></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 226.000000 271.000000 L 226.000000 297.000000 S 226.000000 307.000000 216.000000 307.000000 L 202.000000 307.000000 S 192.000000 307.000000 192.000000 317.000000 L 192.000000 343.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1504590825)"/></g><mask id="1504590825" maskUnits="userSpaceOnUse" x="-100" y="-100" width="494" height="755">
-<rect x="-100" y="-100" width="494" height="755" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="290" height="551" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="157.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="62" y="62" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="88.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="76" y="347" width="154" height="166" style="fill:#EDF0FD;stroke:white;stroke-width:2;" /></g><text class="text" x="153.000000" y="376.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c</text></g><g id="a.1"><g class="shape" ><rect x="127" y="201" width="52" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="153.000000" y="239.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="a.2"><g class="shape" ><rect x="199" y="201" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="225.500000" y="239.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">2</text></g><g id="a.c.d"><g class="shape" ><rect x="126" y="397" width="54" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="153.000000" y="435.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="red" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 88.500000 130.000000 L 88.500000 297.000000 S 88.500000 307.000000 98.500000 307.000000 L 105.000000 307.000000 S 115.000000 307.000000 115.000000 317.000000 L 115.000000 343.000000" class="connection" style="fill:none;stroke:red;stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#1504590825)"/><text class="text-italic" x="89.000000" y="232.000000" style="text-anchor:middle;font-size:16px;fill:red"><tspan x="89.000000" dy="0.000000">line 1</tspan><tspan x="89.000000" dy="17.250000">line 2</tspan><tspan x="89.000000" dy="17.250000">line 3</tspan><tspan x="89.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 153.500000 269.000000 L 153.500000 343.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1504590825)"/></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 226.000000 271.000000 L 226.000000 297.000000 S 226.000000 307.000000 216.000000 307.000000 L 202.000000 307.000000 S 192.000000 307.000000 192.000000 317.000000 L 192.000000 343.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1504590825)"/></g><mask id="1504590825" maskUnits="userSpaceOnUse" x="-90" y="-90" width="494" height="755">
+<rect x="-90" y="-90" width="494" height="755" fill="white"></rect>
 <rect x="71.000000" y="216.000000" width="36" height="69" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="2532" height="359" viewBox="-102 -100 2532 359"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="build_workflow"><g class="shape" ><rect x="0" y="41" width="2328" height="116" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="1164.000000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105" y="60" width="270" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="240.000000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="638" y="60" width="209" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="742.500000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1194" y="60" width="71" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1229.500000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1593" y="60" width="158" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1672.000000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2129" y="60" width="95" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="2176.500000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 377.500000 99.000000 C 479.900000 99.000000 532.300000 99.000000 633.500000 99.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1694094011)"/><text class="text-italic" x="507.000000" y="105.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 848.500000 99.000000 C 985.300000 99.000000 1054.700000 99.000000 1189.500000 99.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1694094011)"/><text class="text-italic" x="1020.000000" y="105.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1269.500000 99.000000 C 1395.900000 99.000000 1461.300000 99.000000 1588.500000 99.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1694094011)"/><text class="text-italic" x="1429.500000" y="105.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1753.500000 99.000000 C 1901.900000 99.000000 1977.300000 99.000000 2124.500000 99.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1694094011)"/><text class="text-italic" x="1940.500000" y="105.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="1694094011" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2532" height="359">
-<rect x="-100" y="-100" width="2532" height="359" fill="white"></rect>
+]]></script><g id="build_workflow"><g class="shape" ><rect x="0" y="41" width="2328" height="116" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="1164.000000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105" y="60" width="270" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="240.000000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="638" y="60" width="209" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="742.500000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1194" y="60" width="71" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1229.500000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1593" y="60" width="158" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1672.000000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2129" y="60" width="95" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="2176.500000" y="107.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 377.500000 99.000000 C 479.900000 99.000000 532.300000 99.000000 633.500000 99.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1694094011)"/><text class="text-italic" x="507.000000" y="105.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 848.500000 99.000000 C 985.300000 99.000000 1054.700000 99.000000 1189.500000 99.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1694094011)"/><text class="text-italic" x="1020.000000" y="105.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1269.500000 99.000000 C 1395.900000 99.000000 1461.300000 99.000000 1588.500000 99.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1694094011)"/><text class="text-italic" x="1429.500000" y="105.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1753.500000 99.000000 C 1901.900000 99.000000 1977.300000 99.000000 2124.500000 99.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1694094011)"/><text class="text-italic" x="1940.500000" y="105.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="1694094011" maskUnits="userSpaceOnUse" x="-102" y="-100" width="2532" height="359">
+<rect x="-102" y="-100" width="2532" height="359" fill="white"></rect>
 <rect x="480.000000" y="89.000000" width="54" height="21" fill="black"></rect>
 <rect x="951.000000" y="89.000000" width="138" height="21" fill="black"></rect>
 <rect x="1370.000000" y="89.000000" width="119" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="2147" height="381" viewBox="-90 -90 2147 381"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="build_workflow"><g class="shape" ><rect x="12" y="12" width="1943" height="177" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="983.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="62" y="62" width="270" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="197.000000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="526" y="62" width="209" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="630.500000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1013" y="62" width="71" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1048.500000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1343" y="62" width="158" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1422.000000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1810" y="62" width="95" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1857.500000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 334.000000 100.500000 L 522.000000 100.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#229275881)"/><text class="text-italic" x="429.000000" y="106.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 737.000000 100.500000 L 1009.000000 100.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#229275881)"/><text class="text-italic" x="874.000000" y="106.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1088.000000 100.500000 L 1339.000000 100.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#229275881)"/><text class="text-italic" x="1213.500000" y="106.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1503.000000 100.500000 L 1806.000000 100.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#229275881)"/><text class="text-italic" x="1655.500000" y="106.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="229275881" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2147" height="381">
-<rect x="-100" y="-100" width="2147" height="381" fill="white"></rect>
+]]></script><g id="build_workflow"><g class="shape" ><rect x="12" y="12" width="1943" height="177" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="983.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="62" y="62" width="270" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="197.000000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="526" y="62" width="209" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="630.500000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1013" y="62" width="71" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1048.500000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1343" y="62" width="158" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1422.000000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1810" y="62" width="95" height="77" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1857.500000" y="109.500000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 334.000000 100.500000 L 522.000000 100.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#229275881)"/><text class="text-italic" x="429.000000" y="106.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 737.000000 100.500000 L 1009.000000 100.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#229275881)"/><text class="text-italic" x="874.000000" y="106.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1088.000000 100.500000 L 1339.000000 100.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#229275881)"/><text class="text-italic" x="1213.500000" y="106.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1503.000000 100.500000 L 1806.000000 100.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#229275881)"/><text class="text-italic" x="1655.500000" y="106.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="229275881" maskUnits="userSpaceOnUse" x="-90" y="-90" width="2147" height="381">
+<rect x="-90" y="-90" width="2147" height="381" fill="white"></rect>
 <rect x="402.000000" y="90.000000" width="54" height="21" fill="black"></rect>
 <rect x="805.000000" y="90.000000" width="138" height="21" fill="black"></rect>
 <rect x="1154.000000" y="90.000000" width="119" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="1071" height="452" viewBox="-102 -102 1071 452"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0" y="0" width="91" height="82" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="45.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="45.500000" dy="0.000000">ninety</tspan><tspan x="45.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="151" y="8" width="91" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="196.500000" y="46.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="302" y="0" width="102" height="82" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="353.000000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="353.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="353.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="464" y="8" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="511.000000" y="46.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="624" y="182" width="83" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="665.500000" y="220.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="618" y="8" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="665.000000" y="46.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="772" y="8" width="95" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="819.500000" y="46.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 511.000000 76.000000 C 511.000000 120.400000 533.500000 144.126623 619.978850 190.735354" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1631294189)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 665.000000 76.000000 C 665.000000 120.400000 665.000000 142.000000 665.000000 178.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1631294189)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 819.500000 76.000000 C 819.500000 120.400000 796.900000 144.000000 710.032868 190.124141" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1631294189)"/></g><mask id="1631294189" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1071" height="452">
-<rect x="-100" y="-100" width="1071" height="452" fill="white"></rect>
+]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0" y="0" width="91" height="82" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="45.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="45.500000" dy="0.000000">ninety</tspan><tspan x="45.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="151" y="8" width="91" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="196.500000" y="46.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="302" y="0" width="102" height="82" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="353.000000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="353.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="353.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="464" y="8" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="511.000000" y="46.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="624" y="182" width="83" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="665.500000" y="220.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="618" y="8" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="665.000000" y="46.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="772" y="8" width="95" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="819.500000" y="46.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 511.000000 76.000000 C 511.000000 120.400000 533.500000 144.126623 619.978850 190.735354" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1631294189)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 665.000000 76.000000 C 665.000000 120.400000 665.000000 142.000000 665.000000 178.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1631294189)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 819.500000 76.000000 C 819.500000 120.400000 796.900000 144.000000 710.032868 190.124141" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1631294189)"/></g><mask id="1631294189" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1071" height="452">
+<rect x="-102" y="-102" width="1071" height="452" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="871" height="432" viewBox="-90 -90 871 432"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12" y="12" width="91" height="82" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="57.500000" dy="0.000000">ninety</tspan><tspan x="57.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="123" y="20" width="91" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="168.500000" y="58.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="234" y="12" width="102" height="82" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="285.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="285.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="285.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="356" y="28" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="403.000000" y="66.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="475" y="174" width="83" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="516.500000" y="212.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="470" y="28" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="517.000000" y="66.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="584" y="28" width="95" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="631.500000" y="66.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 403.000000 96.000000 L 403.000000 124.000000 S 403.000000 134.000000 413.000000 134.000000 L 486.250000 134.000000 S 496.250000 134.000000 496.250000 144.000000 L 496.250000 170.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1719411410)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 517.000000 96.000000 L 517.000000 170.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1719411410)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 631.500000 96.000000 L 631.500000 124.000000 S 631.500000 134.000000 621.500000 134.000000 L 547.750000 134.000000 S 537.750000 134.000000 537.750000 144.000000 L 537.750000 170.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1719411410)"/></g><mask id="1719411410" maskUnits="userSpaceOnUse" x="-100" y="-100" width="871" height="432">
-<rect x="-100" y="-100" width="871" height="432" fill="white"></rect>
+]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12" y="12" width="91" height="82" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="57.500000" dy="0.000000">ninety</tspan><tspan x="57.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="123" y="20" width="91" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="168.500000" y="58.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="234" y="12" width="102" height="82" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="285.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="285.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="285.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="356" y="28" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="403.000000" y="66.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="475" y="174" width="83" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="516.500000" y="212.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="470" y="28" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="517.000000" y="66.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="584" y="28" width="95" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="631.500000" y="66.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 403.000000 96.000000 L 403.000000 124.000000 S 403.000000 134.000000 413.000000 134.000000 L 486.250000 134.000000 S 496.250000 134.000000 496.250000 144.000000 L 496.250000 170.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1719411410)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 517.000000 96.000000 L 517.000000 170.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1719411410)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 631.500000 96.000000 L 631.500000 124.000000 S 631.500000 134.000000 621.500000 134.000000 L 547.750000 134.000000 S 537.750000 134.000000 537.750000 144.000000 L 537.750000 170.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1719411410)"/></g><mask id="1719411410" maskUnits="userSpaceOnUse" x="-90" y="-90" width="871" height="432">
+<rect x="-90" y="-90" width="871" height="432" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
@ -39,7 +39,7 @@ width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css">
    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" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188" y="14" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;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="2468208653" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="332">
-<rect x="-100" y="-100" width="492" height="332" fill="white"></rect>
+]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188" y="14" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;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="2468208653" maskUnits="userSpaceOnUse" x="-102" y="-102" width="492" height="332">
+<rect x="-102" y="-102" width="492" height="332" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
@ -39,7 +39,7 @@ width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160" y="26" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="882453984" maskUnits="userSpaceOnUse" x="-100" y="-100" width="452" height="332">
-<rect x="-100" y="-100" width="452" height="332" fill="white"></rect>
+]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160" y="26" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="882453984" maskUnits="userSpaceOnUse" x="-90" y="-90" width="452" height="332">
+<rect x="-90" y="-90" width="452" height="332" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="470" height="368" viewBox="-102 -100 470 368"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="x"><g class="shape" ><rect x="0" y="41" width="266" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="133.000000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">x</text></g><g id="x.a"><g class="shape" ><rect x="40" y="70" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="66.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="x.b"><g class="shape" ><rect x="173" y="70" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="199.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 94.699280 85.996998 C 114.333333 73.810345 121.000000 70.500000 123.000000 70.500000 C 125.000000 70.500000 127.666667 77.100000 129.666667 87.000000 C 131.666667 96.900000 131.666667 110.100000 129.666667 120.000000 C 127.666667 129.900000 114.333333 133.189655 96.398561 122.057727" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2732949407)"/></g><mask id="2732949407" maskUnits="userSpaceOnUse" x="-100" y="-100" width="470" height="368">
-<rect x="-100" y="-100" width="470" height="368" fill="white"></rect>
+]]></script><g id="x"><g class="shape" ><rect x="0" y="41" width="266" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="133.000000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">x</text></g><g id="x.a"><g class="shape" ><rect x="40" y="70" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="66.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="x.b"><g class="shape" ><rect x="173" y="70" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="199.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 94.699280 85.996998 C 114.333333 73.810345 121.000000 70.500000 123.000000 70.500000 C 125.000000 70.500000 127.666667 77.100000 129.666667 87.000000 C 131.666667 96.900000 131.666667 110.100000 129.666667 120.000000 C 127.666667 129.900000 114.333333 133.189655 96.398561 122.057727" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2732949407)"/></g><mask id="2732949407" maskUnits="userSpaceOnUse" x="-102" y="-100" width="470" height="368">
+<rect x="-102" y="-100" width="470" height="368" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="480" height="370" viewBox="-90 -90 480 370"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="x"><g class="shape" ><rect x="12" y="12" width="276" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="150.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">x</text></g><g id="x.a"><g class="shape" ><rect x="112" y="62" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="x.b"><g class="shape" ><rect x="185" y="62" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="211.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 110.000000 84.000000 L 72.000000 84.000000 S 62.000000 84.000000 62.000000 94.000000 L 62.000000 96.000000 S 62.000000 106.000000 72.000000 106.000000 L 108.000000 106.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1087142245)"/></g><mask id="1087142245" maskUnits="userSpaceOnUse" x="-100" y="-100" width="480" height="370">
-<rect x="-100" y="-100" width="480" height="370" fill="white"></rect>
+]]></script><g id="x"><g class="shape" ><rect x="12" y="12" width="276" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="150.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">x</text></g><g id="x.a"><g class="shape" ><rect x="112" y="62" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="x.b"><g class="shape" ><rect x="185" y="62" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="211.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 110.000000 84.000000 L 72.000000 84.000000 S 62.000000 84.000000 62.000000 94.000000 L 62.000000 96.000000 S 62.000000 106.000000 72.000000 106.000000 L 108.000000 106.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1087142245)"/></g><mask id="1087142245" maskUnits="userSpaceOnUse" x="-90" y="-90" width="480" height="370">
+<rect x="-90" y="-90" width="480" height="370" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
@ -801,8 +801,8 @@ width="1150" height="518" viewBox="-102 -102 1150 518"><style type="text/css">
 </div></foreignObject></g></g><g id="m5_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="654.000000" y="12.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Last message</p>
 </div></foreignObject></g></g><g id="m6_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="804.000000" y="0.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Next message will be<br />
 inserted here</p>
-</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="40" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="72.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="165" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="197.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="290" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="322.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="415" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="447.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="540" y="198" width="66" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="573.000000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="666" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="698.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="841" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="873.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 72.500000 38.000000 C 72.500000 85.600000 72.500000 158.000000 72.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1682804903)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 322.500000 38.000000 C 322.500000 85.600000 322.500000 158.000000 322.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1682804903)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 698.500000 38.000000 C 698.500000 85.600000 698.500000 158.000000 698.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1682804903)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 873.500000 50.000000 C 873.500000 88.000000 873.500000 158.000000 873.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1682804903)"/></g><mask id="1682804903" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1150" height="518">
-<rect x="-100" y="-100" width="1150" height="518" fill="white"></rect>
+</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="40" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="72.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="165" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="197.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="290" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="322.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="415" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="447.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="540" y="198" width="66" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="573.000000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="666" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="698.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="841" y="198" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="873.500000" y="236.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 72.500000 38.000000 C 72.500000 85.600000 72.500000 158.000000 72.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1682804903)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 322.500000 38.000000 C 322.500000 85.600000 322.500000 158.000000 322.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1682804903)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 698.500000 38.000000 C 698.500000 85.600000 698.500000 158.000000 698.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1682804903)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 873.500000 50.000000 C 873.500000 88.000000 873.500000 158.000000 873.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1682804903)"/></g><mask id="1682804903" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1150" height="518">
+<rect x="-102" y="-102" width="1150" height="518" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
@ -801,8 +801,8 @@ width="880" height="503" viewBox="-90 -90 880 503"><style type="text/css">
 </div></foreignObject></g></g><g id="m5_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="425.000000" y="36.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Last message</p>
 </div></foreignObject></g></g><g id="m6_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="535.000000" y="12.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Next message will be<br />
 inserted here</p>
-</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="62" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="94.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="147" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="179.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="232" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="264.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="317" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="349.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="402" y="195" width="66" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="488" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="520.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="573" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="605.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 94.500000 62.000000 L 94.500000 191.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3488592566)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 264.500000 62.000000 L 264.500000 191.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3488592566)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 470.500000 62.000000 L 470.500000 90.000000 S 470.500000 100.000000 480.500000 100.000000 L 510.500000 100.000000 S 520.500000 100.000000 520.500000 110.000000 L 520.500000 191.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3488592566)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 605.500000 62.000000 L 605.500000 191.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3488592566)"/></g><mask id="3488592566" maskUnits="userSpaceOnUse" x="-100" y="-100" width="880" height="503">
-<rect x="-100" y="-100" width="880" height="503" fill="white"></rect>
+</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="62" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="94.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="147" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="179.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="232" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="264.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="317" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="349.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="402" y="195" width="66" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="488" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="520.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="573" y="195" width="65" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="605.500000" y="233.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 94.500000 62.000000 L 94.500000 191.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3488592566)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 264.500000 62.000000 L 264.500000 191.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3488592566)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 470.500000 62.000000 L 470.500000 90.000000 S 470.500000 100.000000 480.500000 100.000000 L 510.500000 100.000000 S 520.500000 100.000000 520.500000 110.000000 L 520.500000 191.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3488592566)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 605.500000 62.000000 L 605.500000 191.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3488592566)"/></g><mask id="3488592566" maskUnits="userSpaceOnUse" x="-90" y="-90" width="880" height="503">
+<rect x="-90" y="-90" width="880" height="503" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/empty_class_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_class_height/dagre/sketch.exp.svg
@ -43,8 +43,8 @@ width="945" height="388" viewBox="-102 -102 945 388"><style type="text/css">
 <text class="text-mono" x="30.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="299.000000" y="120.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="10.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
-<text class="text-mono" x="299.000000" y="166.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><line x1="0.000000" y1="184.000000" x2="319.000000" y2="184.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="class2"><g class="shape" ><rect class="shape" x="379" y="46" width="362" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="379.000000" y="46.000000" width="362.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="560.000000" y="99.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">class without rows</text><line x1="379.000000" y1="138.000000" x2="741.000000" y2="138.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="201479814" maskUnits="userSpaceOnUse" x="-100" y="-100" width="945" height="388">
-<rect x="-100" y="-100" width="945" height="388" fill="white"></rect>
+<text class="text-mono" x="299.000000" y="166.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><line x1="0.000000" y1="184.000000" x2="319.000000" y2="184.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="class2"><g class="shape" ><rect class="shape" x="379" y="46" width="362" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="379.000000" y="46.000000" width="362.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="560.000000" y="99.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">class without rows</text><line x1="379.000000" y1="138.000000" x2="741.000000" y2="138.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="201479814" maskUnits="userSpaceOnUse" x="-102" y="-102" width="945" height="388">
+<rect x="-102" y="-102" width="945" height="388" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-mono {
--- a/e2etests/testdata/regression/empty_class_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_class_height/elk/sketch.exp.svg
@ -43,8 +43,8 @@ width="905" height="388" viewBox="-90 -90 905 388"><style type="text/css">
 <text class="text-mono" x="42.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="311.000000" y="132.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="22.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
-<text class="text-mono" x="311.000000" y="178.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><line x1="12.000000" y1="196.000000" x2="331.000000" y2="196.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="class2"><g class="shape" ><rect class="shape" x="351" y="58" width="362" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="351.000000" y="58.000000" width="362.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="532.000000" y="111.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">class without rows</text><line x1="351.000000" y1="150.000000" x2="713.000000" y2="150.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="299065041" maskUnits="userSpaceOnUse" x="-100" y="-100" width="905" height="388">
-<rect x="-100" y="-100" width="905" height="388" fill="white"></rect>
+<text class="text-mono" x="311.000000" y="178.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><line x1="12.000000" y1="196.000000" x2="331.000000" y2="196.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="class2"><g class="shape" ><rect class="shape" x="351" y="58" width="362" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="351.000000" y="58.000000" width="362.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="532.000000" y="111.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">class without rows</text><line x1="351.000000" y1="150.000000" x2="713.000000" y2="150.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="299065041" maskUnits="userSpaceOnUse" x="-90" y="-90" width="905" height="388">
+<rect x="-90" y="-90" width="905" height="388" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-mono {
--- a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="306" height="402" viewBox="-88 -88 306 402"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="A"><g class="shape" ><rect x="25" y="12" width="80" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text-bold" x="65.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="148" width="106" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text-bold" x="65.000000" y="186.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 65.000000 79.000000 L 65.000000 145.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2235083474)"/></g><mask id="2235083474" maskUnits="userSpaceOnUse" x="-100" y="-100" width="306" height="402">
-<rect x="-100" y="-100" width="306" height="402" fill="white"></rect>
+]]></script><g id="A"><g class="shape" ><rect x="25" y="12" width="80" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text-bold" x="65.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="148" width="106" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text-bold" x="65.000000" y="186.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 65.000000 79.000000 L 65.000000 145.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2235083474)"/></g><mask id="2235083474" maskUnits="userSpaceOnUse" x="-88" y="-88" width="306" height="402">
+<rect x="-88" y="-88" width="306" height="402" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/just-width/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/just-width/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="466" height="265" viewBox="-102 -102 466 265"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="x"><g class="shape" ><rect x="0" y="0" width="262" height="61" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="131.000000" y="36.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">teamwork: having someone to blame</text></g><mask id="1468898270" maskUnits="userSpaceOnUse" x="-100" y="-100" width="466" height="265">
-<rect x="-100" y="-100" width="466" height="265" fill="white"></rect>
+]]></script><g id="x"><g class="shape" ><rect x="0" y="0" width="262" height="61" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="131.000000" y="36.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">teamwork: having someone to blame</text></g><mask id="1468898270" maskUnits="userSpaceOnUse" x="-102" y="-102" width="466" height="265">
+<rect x="-102" y="-102" width="466" height="265" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/just-width/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/just-width/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="466" height="265" viewBox="-90 -90 466 265"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="x"><g class="shape" ><rect x="12" y="12" width="262" height="61" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="143.000000" y="48.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">teamwork: having someone to blame</text></g><mask id="777209830" maskUnits="userSpaceOnUse" x="-100" y="-100" width="466" height="265">
-<rect x="-100" y="-100" width="466" height="265" fill="white"></rect>
+]]></script><g id="x"><g class="shape" ><rect x="12" y="12" width="262" height="61" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="143.000000" y="48.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">teamwork: having someone to blame</text></g><mask id="777209830" maskUnits="userSpaceOnUse" x="-90" y="-90" width="466" height="265">
+<rect x="-90" y="-90" width="466" height="265" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
@ -804,8 +804,8 @@ width="299" height="651" viewBox="-102 -102 299 651"><style type="text/css">
 </ol>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="21" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="47.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="21" y="381" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="47.500000" y="419.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 47.500000 68.000000 C 47.500000 106.000000 47.500000 126.000000 47.500000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#817120199)"/></g><g id="(md -&gt; b)[0]"><path d="M 47.500000 283.000000 C 47.500000 321.000000 47.500000 341.000000 47.500000 377.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#817120199)"/></g><mask id="817120199" maskUnits="userSpaceOnUse" x="-100" y="-100" width="299" height="651">
-<rect x="-100" y="-100" width="299" height="651" fill="white"></rect>
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="21" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="47.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="21" y="381" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="47.500000" y="419.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 47.500000 68.000000 C 47.500000 106.000000 47.500000 126.000000 47.500000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#817120199)"/></g><g id="(md -&gt; b)[0]"><path d="M 47.500000 283.000000 C 47.500000 321.000000 47.500000 341.000000 47.500000 377.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#817120199)"/></g><mask id="817120199" maskUnits="userSpaceOnUse" x="-102" y="-102" width="299" height="651">
+<rect x="-102" y="-102" width="299" height="651" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
@ -804,8 +804,8 @@ width="299" height="591" viewBox="-90 -90 299 591"><style type="text/css">
 </ol>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="33" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="59.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="33" y="333" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="59.500000" y="371.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 59.500000 80.000000 L 59.500000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1583904512)"/></g><g id="(md -&gt; b)[0]"><path d="M 59.500000 265.000000 L 59.500000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1583904512)"/></g><mask id="1583904512" maskUnits="userSpaceOnUse" x="-100" y="-100" width="299" height="591">
-<rect x="-100" y="-100" width="299" height="591" fill="white"></rect>
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="33" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="59.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="33" y="333" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="59.500000" y="371.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 59.500000 80.000000 L 59.500000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1583904512)"/></g><g id="(md -&gt; b)[0]"><path d="M 59.500000 265.000000 L 59.500000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1583904512)"/></g><mask id="1583904512" maskUnits="userSpaceOnUse" x="-90" y="-90" width="299" height="591">
+<rect x="-90" y="-90" width="299" height="591" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="277" height="242" viewBox="-102 -102 277 242"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="x"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect class="shape" width="73" height="38" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="1997683633" maskUnits="userSpaceOnUse" x="-100" y="-100" width="277" height="242">
-<rect x="-100" y="-100" width="277" height="242" fill="white"></rect>
+]]></script><g id="x"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect class="shape" width="73" height="38" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="1997683633" maskUnits="userSpaceOnUse" x="-102" y="-102" width="277" height="242">
+<rect x="-102" y="-102" width="277" height="242" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-mono {
--- a/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="277" height="242" viewBox="-90 -90 277 242"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="x"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect class="shape" width="73" height="38" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="2720532649" maskUnits="userSpaceOnUse" x="-100" y="-100" width="277" height="242">
-<rect x="-100" y="-100" width="277" height="242" fill="white"></rect>
+]]></script><g id="x"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect class="shape" width="73" height="38" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="2720532649" maskUnits="userSpaceOnUse" x="-90" y="-90" width="277" height="242">
+<rect x="-90" y="-90" width="277" height="242" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-mono {
--- a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
@ -41,8 +41,8 @@ width="1286" height="604" viewBox="-102 -102 1286 604"><style type="text/css">
 });
 ]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="1082" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="53.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="92.000000" x2="1082.000000" y2="92.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="351" y="192" width="381" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="351.000000" y="192.000000" width="381.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="217.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="351" y="328" width="381" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="351.000000" y="328.000000" width="381.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="353.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="361.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
 <text class="text" x="402.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="712.000000" y="387.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="351.000000" y1="400.000000" x2="732.000000" y2="400.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 541.000000 94.000000 C 541.000000 132.000000 541.000000 152.000000 541.000000 188.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3867717235)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 230.000000 C 541.000000 268.000000 541.000000 288.000000 541.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3867717235)"/></g><mask id="3867717235" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="604">
-<rect x="-100" y="-100" width="1286" height="604" fill="white"></rect>
+<text class="text" x="712.000000" y="387.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="351.000000" y1="400.000000" x2="732.000000" y2="400.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 541.000000 94.000000 C 541.000000 132.000000 541.000000 152.000000 541.000000 188.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3867717235)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 230.000000 C 541.000000 268.000000 541.000000 288.000000 541.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3867717235)"/></g><mask id="3867717235" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1286" height="604">
+<rect x="-102" y="-102" width="1286" height="604" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
@ -41,8 +41,8 @@ width="1286" height="544" viewBox="-90 -90 1286 544"><style type="text/css">
 });
 ]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="1082" height="92" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="65.750000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="104.000000" x2="1094.000000" y2="104.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="362" y="174" width="381" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="362.000000" y="174.000000" width="381.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="199.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="362" y="280" width="381" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="362.000000" y="280.000000" width="381.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="305.750000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="372.000000" y="339.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
 <text class="text" x="413.000000" y="339.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="723.000000" y="339.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="362.000000" y1="352.000000" x2="743.000000" y2="352.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 553.000000 106.000000 L 553.000000 170.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2395198926)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 212.000000 L 553.000000 276.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2395198926)"/></g><mask id="2395198926" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="544">
-<rect x="-100" y="-100" width="1286" height="544" fill="white"></rect>
+<text class="text" x="723.000000" y="339.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="362.000000" y1="352.000000" x2="743.000000" y2="352.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 553.000000 106.000000 L 553.000000 170.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2395198926)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 212.000000 L 553.000000 276.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2395198926)"/></g><mask id="2395198926" maskUnits="userSpaceOnUse" x="-90" y="-90" width="1286" height="544">
+<rect x="-90" y="-90" width="1286" height="544" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
@ -797,8 +797,8 @@ width="754" height="473" viewBox="-100 -102 754 473"><style type="text/css">
  margin: 0 -1.6em 0.25em 0.2em;
 }
 </style><g id="x" style='opacity:0.400000'><g class="shape" ><rect x="135" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="161.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="248.000000" y="21.000000" width="304" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>linux: because a PC is a terrible thing to waste</p>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="135" y="203" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="161.500000" y="241.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 161.000000 68.000000 C 161.000000 120.800000 161.000000 148.300000 161.000000 199.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2558060737)"/><text class="text-italic" x="161.000000" y="132.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="161.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="161.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="2558060737" maskUnits="userSpaceOnUse" x="-100" y="-100" width="754" height="473">
-<rect x="-100" y="-100" width="754" height="473" fill="white"></rect>
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="135" y="203" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="161.500000" y="241.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 161.000000 68.000000 C 161.000000 120.800000 161.000000 148.300000 161.000000 199.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2558060737)"/><text class="text-italic" x="161.000000" y="132.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="161.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="161.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="2558060737" maskUnits="userSpaceOnUse" x="-100" y="-102" width="754" height="473">
+<rect x="-100" y="-102" width="754" height="473" fill="white"></rect>
 <rect x="0.000000" y="116.000000" width="322" height="37" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
@ -797,8 +797,8 @@ width="713" height="513" viewBox="-88 -90 713 513"><style type="text/css">
  margin: 0 -1.6em 0.25em 0.2em;
 }
 </style><g id="x" style='opacity:0.400000'><g class="shape" ><rect x="146" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="172.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="219.000000" y="33.000000" width="304" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>linux: because a PC is a terrible thing to waste</p>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="146" y="255" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="172.500000" y="293.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 173.000000 80.000000 L 173.000000 251.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1975148760)"/><text class="text-italic" x="173.000000" y="164.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="173.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="173.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="1975148760" maskUnits="userSpaceOnUse" x="-100" y="-100" width="713" height="513">
-<rect x="-100" y="-100" width="713" height="513" fill="white"></rect>
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="146" y="255" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="172.500000" y="293.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 173.000000 80.000000 L 173.000000 251.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1975148760)"/><text class="text-italic" x="173.000000" y="164.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="173.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="173.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="1975148760" maskUnits="userSpaceOnUse" x="-88" y="-90" width="713" height="513">
+<rect x="-88" y="-90" width="713" height="513" fill="white"></rect>
 <rect x="12.000000" y="148.000000" width="322" height="37" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="1425" height="655" viewBox="-102 -100 1425 655"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="k8s"><g class="shape" ><rect x="0" y="41" width="1221" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="610.500000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0" y="328" width="395" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="197.500000" y="315.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="86" y="70" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="152.000000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="278" y="70" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="344.000000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="470" y="70" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="536.000000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="662" y="70" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="728.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="855" y="70" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="921.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1048" y="70" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1114.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="131" y="357" width="76" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="169.000000" y="395.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="279" y="357" width="76" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="317.000000" y="395.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 59.000000 168.000000 C 59.000000 214.400000 59.000000 246.900000 59.000000 324.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1964916300)"/><text class="text-italic" x="59.500000" y="253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 141.000000 168.000000 C 141.000000 214.400000 141.000000 246.900000 141.000000 324.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1964916300)"/><text class="text-italic" x="141.500000" y="253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 217.000000 168.000000 C 217.000000 214.400000 217.000000 246.900000 217.000000 324.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1964916300)"/><text class="text-italic" x="217.500000" y="253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 278.000000 168.000000 C 278.000000 214.400000 278.000000 246.900000 278.000000 324.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1964916300)"/><text class="text-italic" x="278.500000" y="253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">vault</text></g><mask id="1964916300" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1425" height="655">
-<rect x="-100" y="-100" width="1425" height="655" fill="white"></rect>
+]]></script><g id="k8s"><g class="shape" ><rect x="0" y="41" width="1221" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="610.500000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0" y="328" width="395" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="197.500000" y="315.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="86" y="70" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="152.000000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="278" y="70" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="344.000000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="470" y="70" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="536.000000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="662" y="70" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="728.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="855" y="70" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="921.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1048" y="70" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1114.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="131" y="357" width="76" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="169.000000" y="395.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="279" y="357" width="76" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="317.000000" y="395.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 59.000000 168.000000 C 59.000000 214.400000 59.000000 246.900000 59.000000 324.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1964916300)"/><text class="text-italic" x="59.500000" y="253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 141.000000 168.000000 C 141.000000 214.400000 141.000000 246.900000 141.000000 324.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1964916300)"/><text class="text-italic" x="141.500000" y="253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 217.000000 168.000000 C 217.000000 214.400000 217.000000 246.900000 217.000000 324.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1964916300)"/><text class="text-italic" x="217.500000" y="253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 278.000000 168.000000 C 278.000000 214.400000 278.000000 246.900000 278.000000 324.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1964916300)"/><text class="text-italic" x="278.500000" y="253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">vault</text></g><mask id="1964916300" maskUnits="userSpaceOnUse" x="-102" y="-100" width="1425" height="655">
+<rect x="-102" y="-100" width="1425" height="655" fill="white"></rect>
 <rect x="30.000000" y="237.000000" width="59" height="21" fill="black"></rect>
 <rect x="109.000000" y="237.000000" width="65" height="21" fill="black"></rect>
 <rect x="194.000000" y="237.000000" width="47" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="1199" height="757" viewBox="-90 -90 1199 757"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="k8s"><g class="shape" ><rect x="12" y="12" width="995" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="509.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="301" y="399" width="272" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="437.000000" y="432.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="62" y="62" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="128.000000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="214" y="62" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="280.000000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="366" y="62" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="432.000000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="518" y="62" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="584.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="671" y="62" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="737.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="824" y="62" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="890.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="351" y="449" width="76" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="389.000000" y="487.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="447" y="449" width="76" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="485.000000" y="487.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 211.000000 180.000000 L 211.000000 299.000000 S 211.000000 309.000000 221.000000 309.000000 L 345.600000 309.000000 S 355.600000 309.000000 355.600000 319.000000 L 355.600000 395.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2150703550)"/><text class="text-italic" x="262.500000" y="315.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 410.000000 180.000000 L 410.000000 395.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2150703550)"/><text class="text-italic" x="410.500000" y="294.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 609.000000 180.000000 L 609.000000 299.000000 S 609.000000 309.000000 599.000000 309.000000 L 474.400000 309.000000 S 464.400000 309.000000 464.400000 319.000000 L 464.400000 395.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2150703550)"/><text class="text-italic" x="557.500000" y="315.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 808.000000 180.000000 L 808.000000 349.000000 S 808.000000 359.000000 798.000000 359.000000 L 528.800000 359.000000 S 518.800000 359.000000 518.800000 369.000000 L 518.800000 395.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2150703550)"/><text class="text-italic" x="733.500000" y="365.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">vault</text></g><mask id="2150703550" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1199" height="757">
-<rect x="-100" y="-100" width="1199" height="757" fill="white"></rect>
+]]></script><g id="k8s"><g class="shape" ><rect x="12" y="12" width="995" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="509.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="301" y="399" width="272" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="437.000000" y="432.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="62" y="62" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="128.000000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="214" y="62" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="280.000000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="366" y="62" width="132" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="432.000000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="518" y="62" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="584.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="671" y="62" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="737.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="824" y="62" width="133" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="890.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="351" y="449" width="76" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="389.000000" y="487.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="447" y="449" width="76" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="485.000000" y="487.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 211.000000 180.000000 L 211.000000 299.000000 S 211.000000 309.000000 221.000000 309.000000 L 345.600000 309.000000 S 355.600000 309.000000 355.600000 319.000000 L 355.600000 395.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2150703550)"/><text class="text-italic" x="262.500000" y="315.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 410.000000 180.000000 L 410.000000 395.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2150703550)"/><text class="text-italic" x="410.500000" y="294.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 609.000000 180.000000 L 609.000000 299.000000 S 609.000000 309.000000 599.000000 309.000000 L 474.400000 309.000000 S 464.400000 309.000000 464.400000 319.000000 L 464.400000 395.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2150703550)"/><text class="text-italic" x="557.500000" y="315.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 808.000000 180.000000 L 808.000000 349.000000 S 808.000000 359.000000 798.000000 359.000000 L 528.800000 359.000000 S 518.800000 359.000000 518.800000 369.000000 L 518.800000 395.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2150703550)"/><text class="text-italic" x="733.500000" y="365.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">vault</text></g><mask id="2150703550" maskUnits="userSpaceOnUse" x="-90" y="-90" width="1199" height="757">
+<rect x="-90" y="-90" width="1199" height="757" fill="white"></rect>
 <rect x="233.000000" y="299.000000" width="59" height="21" fill="black"></rect>
 <rect x="378.000000" y="278.000000" width="65" height="21" fill="black"></rect>
 <rect x="534.000000" y="299.000000" width="47" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="360" height="322" viewBox="-102 -102 360 322"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="my network"><g class="shape" ><rect x="0" y="0" width="156" height="118" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="48.500000" y="29.500000" width="59" height="59" /><text class="text-bold" x="78.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="3739978883" maskUnits="userSpaceOnUse" x="-100" y="-100" width="360" height="322">
-<rect x="-100" y="-100" width="360" height="322" fill="white"></rect>
+]]></script><g id="my network"><g class="shape" ><rect x="0" y="0" width="156" height="118" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="48.500000" y="29.500000" width="59" height="59" /><text class="text-bold" x="78.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="3739978883" maskUnits="userSpaceOnUse" x="-102" y="-102" width="360" height="322">
+<rect x="-102" y="-102" width="360" height="322" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="360" height="322" viewBox="-90 -90 360 322"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="my network"><g class="shape" ><rect x="12" y="12" width="156" height="118" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="60.500000" y="41.500000" width="59" height="59" /><text class="text-bold" x="90.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="581971707" maskUnits="userSpaceOnUse" x="-100" y="-100" width="360" height="322">
-<rect x="-100" y="-100" width="360" height="322" fill="white"></rect>
+]]></script><g id="my network"><g class="shape" ><rect x="12" y="12" width="156" height="118" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="60.500000" y="41.500000" width="59" height="59" /><text class="text-bold" x="90.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="581971707" maskUnits="userSpaceOnUse" x="-90" y="-90" width="360" height="322">
+<rect x="-90" y="-90" width="360" height="322" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="474" height="882" viewBox="-88 -88 474 882"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="foo"><g class="shape" ><rect x="12" y="12" width="274" height="306" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text" x="149.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="12" y="388" width="274" height="306" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text" x="149.000000" y="421.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24" y="100" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="74.000000" y="138.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="174" y="100" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="224.000000" y="138.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24" y="476" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="74.000000" y="514.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="174" y="476" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="224.000000" y="514.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 149.000000 319.000000 L 149.000000 385.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3338630578)"/></g><g id="(foo.a -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 305.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3338630578)"/></g><g id="(foo.b -- )[0]"><path d="M 224.000000 168.000000 L 224.000000 305.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3338630578)"/></g><g id="(foobar.c -- )[0]"><path d="M 74.000000 544.000000 L 74.000000 681.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3338630578)"/></g><g id="(foobar.d -- )[0]"><path d="M 224.000000 544.000000 L 224.000000 681.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3338630578)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 76.000000 236.000000 L 220.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3338630578)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 76.000000 612.000000 L 220.000000 612.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3338630578)"/></g><mask id="3338630578" maskUnits="userSpaceOnUse" x="-100" y="-100" width="474" height="882">
-<rect x="-100" y="-100" width="474" height="882" fill="white"></rect>
+]]></script><g id="foo"><g class="shape" ><rect x="12" y="12" width="274" height="306" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text" x="149.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="12" y="388" width="274" height="306" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text" x="149.000000" y="421.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24" y="100" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="74.000000" y="138.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="174" y="100" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="224.000000" y="138.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24" y="476" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="74.000000" y="514.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="174" y="476" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="224.000000" y="514.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 149.000000 319.000000 L 149.000000 385.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3338630578)"/></g><g id="(foo.a -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 305.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3338630578)"/></g><g id="(foo.b -- )[0]"><path d="M 224.000000 168.000000 L 224.000000 305.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3338630578)"/></g><g id="(foobar.c -- )[0]"><path d="M 74.000000 544.000000 L 74.000000 681.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3338630578)"/></g><g id="(foobar.d -- )[0]"><path d="M 224.000000 544.000000 L 224.000000 681.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3338630578)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 76.000000 236.000000 L 220.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3338630578)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 76.000000 612.000000 L 220.000000 612.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3338630578)"/></g><mask id="3338630578" maskUnits="userSpaceOnUse" x="-88" y="-88" width="474" height="882">
+<rect x="-88" y="-88" width="474" height="882" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="454" height="338" viewBox="-90 -50 454 338"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="52" width="100" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="62.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="162" y="52" width="100" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="212.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3189364926)"/></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3189364926)"/></g><mask id="3189364926" maskUnits="userSpaceOnUse" x="-100" y="-100" width="454" height="338">
-<rect x="-100" y="-100" width="454" height="338" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="12" y="52" width="100" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="62.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="162" y="52" width="100" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="212.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3189364926)"/></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3189364926)"/></g><mask id="3189364926" maskUnits="userSpaceOnUse" x="-90" y="-50" width="454" height="338">
+<rect x="-90" y="-50" width="454" height="338" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="454" height="338" viewBox="-90 -50 454 338"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="52" width="100" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="62.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="162" y="52" width="100" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="212.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3189364926)"/></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3189364926)"/></g><mask id="3189364926" maskUnits="userSpaceOnUse" x="-100" y="-100" width="454" height="338">
-<rect x="-100" y="-100" width="454" height="338" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="12" y="52" width="100" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="62.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="162" y="52" width="100" height="66" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="212.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3189364926)"/></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3189364926)"/></g><mask id="3189364926" maskUnits="userSpaceOnUse" x="-90" y="-50" width="454" height="338">
+<rect x="-90" y="-50" width="454" height="338" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="332" height="523" viewBox="-90 -50 332 523"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="b"><g class="shape" ><rect x="12" y="52" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="62.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2695758723)"/></g><g id="b.1"><g class="shape" ><rect x="56" y="178" width="12" height="135" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2695758723)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2695758723)"/></g><mask id="2695758723" maskUnits="userSpaceOnUse" x="-100" y="-100" width="332" height="523">
-<rect x="-100" y="-100" width="332" height="523" fill="white"></rect>
+]]></script><g id="b"><g class="shape" ><rect x="12" y="52" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="62.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2695758723)"/></g><g id="b.1"><g class="shape" ><rect x="56" y="178" width="12" height="135" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2695758723)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2695758723)"/></g><mask id="2695758723" maskUnits="userSpaceOnUse" x="-90" y="-50" width="332" height="523">
+<rect x="-90" y="-50" width="332" height="523" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="332" height="523" viewBox="-90 -50 332 523"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="b"><g class="shape" ><rect x="12" y="52" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="62.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2695758723)"/></g><g id="b.1"><g class="shape" ><rect x="56" y="178" width="12" height="135" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2695758723)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2695758723)"/></g><mask id="2695758723" maskUnits="userSpaceOnUse" x="-100" y="-100" width="332" height="523">
-<rect x="-100" y="-100" width="332" height="523" fill="white"></rect>
+]]></script><g id="b"><g class="shape" ><rect x="12" y="52" width="100" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="62.000000" y="90.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2695758723)"/></g><g id="b.1"><g class="shape" ><rect x="56" y="178" width="12" height="135" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2695758723)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2695758723)"/></g><mask id="2695758723" maskUnits="userSpaceOnUse" x="-90" y="-50" width="332" height="523">
+<rect x="-90" y="-50" width="332" height="523" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
@ -47,8 +47,8 @@ width="1392" height="312" viewBox="-102 -102 1392 312"><style type="text/css">
 <text class="text" x="866.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="1168.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="594.000000" y1="72.000000" x2="1188.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="604.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="866.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
-<text class="text" x="1168.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="594.000000" y1="108.000000" x2="1188.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="3897867896" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1392" height="312">
-<rect x="-100" y="-100" width="1392" height="312" fill="white"></rect>
+<text class="text" x="1168.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="594.000000" y1="108.000000" x2="1188.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="3897867896" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1392" height="312">
+<rect x="-102" y="-102" width="1392" height="312" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
@ -47,8 +47,8 @@ width="1352" height="312" viewBox="-90 -90 1352 312"><style type="text/css">
 <text class="text" x="838.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="1140.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="566.000000" y1="84.000000" x2="1160.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="576.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="838.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
-<text class="text" x="1140.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="566.000000" y1="120.000000" x2="1160.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="2885684102" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1352" height="312">
-<rect x="-100" y="-100" width="1352" height="312" fill="white"></rect>
+<text class="text" x="1140.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="566.000000" y1="120.000000" x2="1160.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="2885684102" maskUnits="userSpaceOnUse" x="-90" y="-90" width="1352" height="312">
+<rect x="-90" y="-90" width="1352" height="312" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
@ -63,8 +63,8 @@ width="626" height="1028" viewBox="-102 -102 626 1028"><style type="text/css">
 <text class="text" x="218.000000" y="643.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
 <text class="text" x="295.000000" y="643.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="107.000000" y1="654.000000" x2="315.000000" y2="654.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(113.000000 754.000000)"><rect class="shape" width="196" height="70" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
-</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 211.000000 370.000000 C 211.000000 408.000000 211.000000 428.000000 211.000000 464.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#314452596)"/></g><g id="(users -&gt; code)[0]"><path d="M 211.000000 656.000000 C 211.000000 694.000000 211.000000 714.000000 211.000000 750.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#314452596)"/></g><mask id="314452596" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="1028">
-<rect x="-100" y="-100" width="626" height="1028" fill="white"></rect>
+</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 211.000000 370.000000 C 211.000000 408.000000 211.000000 428.000000 211.000000 464.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#314452596)"/></g><g id="(users -&gt; code)[0]"><path d="M 211.000000 656.000000 C 211.000000 694.000000 211.000000 714.000000 211.000000 750.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#314452596)"/></g><mask id="314452596" maskUnits="userSpaceOnUse" x="-102" y="-102" width="626" height="1028">
+<rect x="-102" y="-102" width="626" height="1028" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
@ -63,8 +63,8 @@ width="626" height="968" viewBox="-90 -90 626 968"><style type="text/css">
 <text class="text" x="230.000000" y="625.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
 <text class="text" x="307.000000" y="625.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="119.000000" y1="636.000000" x2="327.000000" y2="636.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(125.000000 706.000000)"><rect class="shape" width="196" height="70" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
-</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 223.000000 382.000000 L 223.000000 446.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3740991939)"/></g><g id="(users -&gt; code)[0]"><path d="M 223.000000 638.000000 L 223.000000 702.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3740991939)"/></g><mask id="3740991939" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="968">
-<rect x="-100" y="-100" width="626" height="968" fill="white"></rect>
+</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 223.000000 382.000000 L 223.000000 446.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3740991939)"/></g><g id="(users -&gt; code)[0]"><path d="M 223.000000 638.000000 L 223.000000 702.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3740991939)"/></g><mask id="3740991939" maskUnits="userSpaceOnUse" x="-90" y="-90" width="626" height="968">
+<rect x="-90" y="-90" width="626" height="968" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="370" height="436" viewBox="-102 -102 370 436"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="57" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="83.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="166" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="113" y="166" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="139.500000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 59.410707 67.653297 C 33.307229 106.000000 26.500000 126.000000 26.500000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3880070413)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.589293 67.653297 C 132.692771 106.000000 139.500000 126.000000 139.500000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3880070413)"/></g><mask id="3880070413" maskUnits="userSpaceOnUse" x="-100" y="-100" width="370" height="436">
-<rect x="-100" y="-100" width="370" height="436" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="57" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="83.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="166" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="113" y="166" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="139.500000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 59.410707 67.653297 C 33.307229 106.000000 26.500000 126.000000 26.500000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3880070413)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.589293 67.653297 C 132.692771 106.000000 139.500000 126.000000 139.500000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3880070413)"/></g><mask id="3880070413" maskUnits="userSpaceOnUse" x="-102" y="-102" width="370" height="436">
+<rect x="-102" y="-102" width="370" height="436" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="330" height="416" viewBox="-90 -90 330 416"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="20" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="46.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="158" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="196.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="85" y="158" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="111.500000" y="196.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 38.500000 80.000000 L 38.500000 154.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1605829925)"/></g><g id="(a -&gt; c)[0]"><path d="M 56.166667 80.000000 L 56.166667 108.000000 S 56.166667 118.000000 66.166667 118.000000 L 101.500000 118.000000 S 111.500000 118.000000 111.500000 128.000000 L 111.500000 154.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1605829925)"/></g><mask id="1605829925" maskUnits="userSpaceOnUse" x="-100" y="-100" width="330" height="416">
-<rect x="-100" y="-100" width="330" height="416" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="20" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="46.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="158" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="196.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="85" y="158" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="111.500000" y="196.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 38.500000 80.000000 L 38.500000 154.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1605829925)"/></g><g id="(a -&gt; c)[0]"><path d="M 56.166667 80.000000 L 56.166667 108.000000 S 56.166667 118.000000 66.166667 118.000000 L 101.500000 118.000000 S 111.500000 118.000000 111.500000 128.000000 L 111.500000 154.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1605829925)"/></g><mask id="1605829925" maskUnits="userSpaceOnUse" x="-90" y="-90" width="330" height="416">
+<rect x="-90" y="-90" width="330" height="416" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="257" height="436" viewBox="-102 -102 257 436"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="166" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#258128731)"/></g><mask id="258128731" maskUnits="userSpaceOnUse" x="-100" y="-100" width="257" height="436">
-<rect x="-100" y="-100" width="257" height="436" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="166" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="204.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#258128731)"/></g><mask id="258128731" maskUnits="userSpaceOnUse" x="-102" y="-102" width="257" height="436">
+<rect x="-102" y="-102" width="257" height="436" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="257" height="406" viewBox="-90 -90 257 406"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="148" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="186.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3916722828)"/></g><mask id="3916722828" maskUnits="userSpaceOnUse" x="-100" y="-100" width="257" height="406">
-<rect x="-100" y="-100" width="257" height="406" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="148" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="186.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3916722828)"/></g><mask id="3916722828" maskUnits="userSpaceOnUse" x="-90" y="-90" width="257" height="406">
+<rect x="-90" y="-90" width="257" height="406" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="338" height="634" viewBox="-102 -100 338 634"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="1" y="41" width="133" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="67.500000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="307" width="134" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="67.000000" y="294.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="41" y="70" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="67.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="40" y="336" width="54" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="67.000000" y="374.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 67.000000 138.500000 C 67.000000 160.100000 67.000000 176.000000 67.000000 191.000000 C 67.000000 206.000000 67.000000 280.100000 67.000000 332.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#180528842)"/></g><mask id="180528842" maskUnits="userSpaceOnUse" x="-100" y="-100" width="338" height="634">
-<rect x="-100" y="-100" width="338" height="634" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="1" y="41" width="133" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="67.500000" y="28.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="307" width="134" height="125" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="67.000000" y="294.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="41" y="70" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="67.500000" y="108.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="40" y="336" width="54" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="67.000000" y="374.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 67.000000 138.500000 C 67.000000 160.100000 67.000000 176.000000 67.000000 191.000000 C 67.000000 206.000000 67.000000 280.100000 67.000000 332.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#180528842)"/></g><mask id="180528842" maskUnits="userSpaceOnUse" x="-102" y="-100" width="338" height="634">
+<rect x="-102" y="-100" width="338" height="634" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="358" height="616" viewBox="-90 -90 358 616"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="153" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="88.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="258" width="154" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="89.000000" y="291.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="62" y="62" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="88.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="62" y="308" width="54" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="89.000000" y="346.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 89.000000 130.000000 L 89.000000 304.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#414993162)"/></g><mask id="414993162" maskUnits="userSpaceOnUse" x="-100" y="-100" width="358" height="616">
-<rect x="-100" y="-100" width="358" height="616" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="153" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="88.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="258" width="154" height="166" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="89.000000" y="291.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="62" y="62" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="88.500000" y="100.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="62" y="308" width="54" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="89.000000" y="346.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 89.000000 130.000000 L 89.000000 304.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#414993162)"/></g><mask id="414993162" maskUnits="userSpaceOnUse" x="-90" y="-90" width="358" height="616">
+<rect x="-90" y="-90" width="358" height="616" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
@ -39,8 +39,8 @@ width="257" height="457" viewBox="-102 -102 257 457"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="187" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="225.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 26.500000 68.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2702488500)"/><text class="text-italic" x="26.500000" y="132.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2702488500" maskUnits="userSpaceOnUse" x="-100" y="-100" width="257" height="457">
-<rect x="-100" y="-100" width="257" height="457" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="187" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="26.500000" y="225.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 26.500000 68.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2702488500)"/><text class="text-italic" x="26.500000" y="132.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2702488500" maskUnits="userSpaceOnUse" x="-102" y="-102" width="257" height="457">
+<rect x="-102" y="-102" width="257" height="457" fill="white"></rect>
 <rect x="10.000000" y="116.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
@ -39,8 +39,8 @@ width="257" height="497" viewBox="-90 -90 257 497"><style type="text/css">
    svgEl.setAttribute("height", height * ratio - 16);
  }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="239" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="277.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 38.500000 80.000000 L 38.500000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2573035679)"/><text class="text-italic" x="38.500000" y="164.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2573035679" maskUnits="userSpaceOnUse" x="-100" y="-100" width="257" height="497">
-<rect x="-100" y="-100" width="257" height="497" fill="white"></rect>
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="239" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="38.500000" y="277.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" 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 class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 38.500000 80.000000 L 38.500000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2573035679)"/><text class="text-italic" x="38.500000" y="164.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2573035679" maskUnits="userSpaceOnUse" x="-90" y="-90" width="257" height="497">
+<rect x="-90" y="-90" width="257" height="497" fill="white"></rect>
 <rect x="22.000000" y="148.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/animated/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/animated/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/animated/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/animated/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
--- a/Show more
+++ b/Show more