Merge branch 'master' of github.com:terrastruct/d2 into terrastruct-master

README.md

@@ -42,6 +42,7 @@ https://user-images.githubusercontent.com/3120367/206125010-bd1fea8e-248a-43e7-8
   - <a href="#community-plugins" id="toc-community-plugins">Community plugins</a>
   - <a href="#misc" id="toc-misc">Misc</a>
 - <a href="#faq" id="toc-faq">FAQ</a>
+- <a href="#open-source-projects-documenting-with-d2" id="toc-open-source-projects-documenting-with-d2">Open-source projects documenting with D2</a>
 
 ## What does D2 look like?
 
@@ -218,6 +219,7 @@ let us know and we'll be happy to include it here!
 - **D2 org-mode support**: [https://github.com/xcapaldi/ob-d2](https://github.com/xcapaldi/ob-d2)
 - **Python D2 diagram builder**: [https://github.com/MrBlenny/py-d2](https://github.com/MrBlenny/py-d2)
 - **Clojure D2 transpiler**: [https://github.com/judepayne/dictim](https://github.com/judepayne/dictim)
+- **JavaScript D2 diagram builder**: [https://github.com/Kreshnik/d2lang-js](https://github.com/Kreshnik/d2lang-js)
 
 ### Misc
 
@@ -240,3 +242,21 @@ let us know and we'll be happy to include it here!
   - Please open up a Github Issue.
 - I have a private inquiry.
   - Please reach out at [hi@d2lang.com](hi@d2lang.com).
+
+## Open-source projects documenting with D2
+
+Do you have or see an open-source project with `.d2` files? Please submit a PR adding to
+this list (ordered by star count, desc).
+
+- [Block Protocol](https://github.com/blockprotocol/blockprotocol) - The Block Protocol is
+  an open standard for building and using data-driven blocks.
+- [Ivy Wallet](https://github.com/Ivy-Apps/ivy-wallet) - Ivy Wallet is an open-source
+  money manager app for Android.
+- [Learn EVM Attacks](https://github.com/coinspect/learn-evm-attacks) - Learn & Contribute
+  on previously exploited vulnerabilities across several EVM projects.
+- [BYCEPS](https://github.com/byceps/byceps) - BYCEPS is a self-hosted web platform to run
+  LAN parties.
+- [Re:Earth](https://github.com/reearth/reearth-web) - A free, open and highly extensible
+  WebGIS platform.
+- [Terraform OCI VSCode Server](https://github.com/timoa/terraform-oci-vscode-server) -
+  Terraform project that deploys VSCode Server on Oracle Cloud Infrastructure.

ci/release/changelogs/next.md

@@ -1,5 +1,26 @@
+![animated connection example](https://user-images.githubusercontent.com/3120367/213055161-e6f1918b-150c-4beb-b61c-3ea05cc29f00.svg)
+
+
 #### Features 🚀
+
 - Circle arrowheads are now supported. [#634](https://github.com/terrastruct/d2/pull/634)
+
+- `animated` keyword implemented for connections. [#652](https://github.com/terrastruct/d2/pull/652)
+
 #### Improvements 🧹
 
+- ELK layouts tuned to have better defaults. [#627](https://github.com/terrastruct/d2/pull/627)
+- Code snippets of unrecognized languages will render (just without syntax highlighting). [#650](https://github.com/terrastruct/d2/pull/650)
+- Adds sketched versions of arrowheads. [#656](https://github.com/terrastruct/d2/pull/656)
+
 #### Bugfixes ⛑️
+
+- Fixes arrowheads sometimes appearing broken in dagre layouts. [#649](https://github.com/terrastruct/d2/pull/649)
+- Fixes attributes being ignored for `sql_table` to `sql_table` connections. [#658](https://github.com/terrastruct/d2/pull/658)
+- Fixes tooltip/link attributes being ignored for `sql_table` and `class`. [#658](https://github.com/terrastruct/d2/pull/658)
+- Fixes arrowheads sometimes appearing broken with sketch on. [#656](https://github.com/terrastruct/d2/pull/656)
+- Fixes code snippets not being tall enough with leading newlines. [#664](https://github.com/terrastruct/d2/pull/664)
+- Opacity was not being applied to labels of shapes (and other edge cases). [#677](https://github.com/terrastruct/d2/pull/677)
+- Icon URLs that needed escaping (e.g. with ampersands) are handled correctly by CLI. [#666](https://github.com/terrastruct/d2/pull/666)
+- Fixes markdown shapes being slightly too short for their text in some cases. [#665](https://github.com/terrastruct/d2/pull/665)
+- Fixes self-connections inside layouts when using ELK. [#676](https://github.com/terrastruct/d2/pull/676)

ci/sub

@@ -1 +1 @@
-Subproject commit 9a29d9ea640834905c4010c0b3d14b7301ebb6d8
+Subproject commit 23984e4d743dd9977b513c0fd850a4996c9198a5

d2compiler/compile.go

@@ -757,13 +757,15 @@ func flattenContainer(g *d2graph.Graph, obj *d2graph.Object) {
 		// TODO more attributes
 		if e.SrcTableColumnIndex != nil {
 			newEdge.SrcTableColumnIndex = new(int)
+			newEdge.SrcArrowhead = e.SrcArrowhead
 			*newEdge.SrcTableColumnIndex = *e.SrcTableColumnIndex
 		}
 		if e.DstTableColumnIndex != nil {
 			newEdge.DstTableColumnIndex = new(int)
+			newEdge.DstArrowhead = e.DstArrowhead
 			*newEdge.DstTableColumnIndex = *e.DstTableColumnIndex
 		}
-		newEdge.Attributes.Label = e.Attributes.Label
+		newEdge.Attributes = e.Attributes
 		newEdge.References = e.References
 	}
 	updatedEdges := []*d2graph.Edge{}

d2compiler/compile_test.go

@@ -1597,6 +1597,25 @@ b`, g.Objects[0].Attributes.Label.Value)
 				}
 			},
 		},
+		{
+			name: "table_connection_attr",
+
+			text: `x: {
+  shape: sql_table
+  y
+}
+a: {
+  shape: sql_table
+  b
+}
+x.y -> a.b: {
+  style.animated: true
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				tassert.Equal(t, "true", g.Edges[0].Attributes.Style.Animated.Value)
+			},
+		},
 		{
 			name: "class_paren",
 

d2graph/d2graph.go

@@ -1027,6 +1027,27 @@ func GetTextDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler, t *d2
 		var h int
 		if t.Language != "" {
 			w, h = ruler.Measure(d2fonts.SourceCodePro.Font(t.FontSize, d2fonts.FONT_STYLE_REGULAR), t.Text)
+
+			// count empty leading and trailing lines since ruler will not be able to measure it
+			lines := strings.Split(t.Text, "\n")
+			leadingLines := 0
+			for _, line := range lines {
+				if strings.TrimSpace(line) == "" {
+					leadingLines++
+				} else {
+					break
+				}
+			}
+			trailingLines := 0
+			for i := len(lines) - 1; i >= 0; i-- {
+				if strings.TrimSpace(lines[i]) == "" {
+					trailingLines++
+				} else {
+					break
+				}
+			}
+			h += t.FontSize * (leadingLines + trailingLines)
+
 			// padding
 			w += 12
 			h += 12

d2layouts/d2dagrelayout/layout.go

@@ -30,6 +30,8 @@ var setupJS string
 //go:embed dagre.js
 var dagreJS string
 
+const MIN_SEGMENT_LEN = 10
+
 type ConfigurableOpts struct {
 	NodeSep int `json:"nodesep"`
 	EdgeSep int `json:"edgesep"`
@@ -247,6 +249,47 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			}
 		}
 
+		// arrowheads can appear broken if segments are very short from dagre routing a point just outside the shape
+		// to fix this, we try extending the previous segment into the shape instead of having a very short segment
+		if !start.Equals(points[0]) && startIndex+2 < len(points) {
+			newStartingSegment := *geo.NewSegment(start, points[startIndex+1])
+			if newStartingSegment.Length() < MIN_SEGMENT_LEN {
+				// we don't want a very short segment right next to the source because it will mess up the arrowhead
+				// instead we want to extend the next segment into the shape border if possible
+				nextStart := points[startIndex+1]
+				nextEnd := points[startIndex+2]
+
+				// Note: in other direction to extend towards source
+				nextSegment := *geo.NewSegment(nextStart, nextEnd)
+				v := nextSegment.ToVector()
+				extendedStart := nextEnd.ToVector().Add(v.AddLength(MIN_SEGMENT_LEN)).ToPoint()
+				extended := *geo.NewSegment(nextEnd, extendedStart)
+
+				if intersections := edge.Src.Box.Intersections(extended); len(intersections) > 0 {
+					start = intersections[0]
+					startIndex += 1
+				}
+			}
+		}
+		if !end.Equals(points[len(points)-1]) && endIndex-2 >= 0 {
+			newEndingSegment := *geo.NewSegment(end, points[endIndex-1])
+			if newEndingSegment.Length() < MIN_SEGMENT_LEN {
+				// extend the prev segment into the shape border if possible
+				prevStart := points[endIndex-2]
+				prevEnd := points[endIndex-1]
+
+				prevSegment := *geo.NewSegment(prevStart, prevEnd)
+				v := prevSegment.ToVector()
+				extendedEnd := prevStart.ToVector().Add(v.AddLength(MIN_SEGMENT_LEN)).ToPoint()
+				extended := *geo.NewSegment(prevStart, extendedEnd)
+
+				if intersections := edge.Dst.Box.Intersections(extended); len(intersections) > 0 {
+					end = intersections[0]
+					endIndex -= 1
+				}
+			}
+		}
+
 		srcShape := shape.NewShape(d2target.DSL_SHAPE_TO_SHAPE_TYPE[strings.ToLower(edge.Src.Attributes.Shape.Value)], edge.Src.Box)
 		dstShape := shape.NewShape(d2target.DSL_SHAPE_TO_SHAPE_TYPE[strings.ToLower(edge.Dst.Attributes.Shape.Value)], edge.Dst.Box)
 
@@ -263,6 +306,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 
 		path := make([]*geo.Point, 0)
 		path = append(path, points[0])
+		if len(vectors) > 1 {
 			path = append(path, points[0].AddVector(vectors[0].Multiply(.8)))
 			for i := 1; i < len(vectors)-2; i++ {
 				p := points[i]
@@ -272,9 +316,10 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 				path = append(path, p.AddVector(v.Multiply(.8)))
 			}
 			path = append(path, points[len(points)-2].AddVector(vectors[len(vectors)-1].Multiply(.2)))
+			edge.IsCurve = true
+		}
 		path = append(path, points[len(points)-1])
 
-		edge.IsCurve = true
 		edge.Route = path
 		// compile needs to assign edge label positions
 		if edge.Attributes.Label.Value != "" {

d2layouts/d2elklayout/layout.go

@@ -94,6 +94,8 @@ var DefaultOpts = ConfigurableOpts{
 }
 
 type elkOpts struct {
+	Thoroughness                 int    `json:"elk.layered.thoroughness,omitempty"`
+	EdgeEdgeBetweenLayersSpacing int    `json:"elk.layered.spacing.edgeEdgeBetweenLayers,omitempty"`
 	Direction                    string `json:"elk.direction"`
 	HierarchyHandling            string `json:"elk.hierarchyHandling,omitempty"`
 	InlineEdgeLabels             bool   `json:"elk.edgeLabels.inline,omitempty"`
@@ -130,6 +132,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 	elkGraph := &ELKGraph{
 		ID: "root",
 		LayoutOptions: &elkOpts{
+			Thoroughness:                 20,
+			EdgeEdgeBetweenLayersSpacing: 50,
 			HierarchyHandling:            "INCLUDE_CHILDREN",
 			ConsiderModelOrder:           "NODES_AND_EDGES",
 			ConfigurableOpts: ConfigurableOpts{
@@ -184,7 +188,14 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 		if len(obj.ChildrenArray) > 0 {
 			n.LayoutOptions = &elkOpts{
 				ForceNodeModelOrder:          true,
+				Thoroughness:                 20,
+				EdgeEdgeBetweenLayersSpacing: 50,
+				HierarchyHandling:            "INCLUDE_CHILDREN",
+				ConsiderModelOrder:           "NODES_AND_EDGES",
 				ConfigurableOpts: ConfigurableOpts{
+					NodeSpacing:     opts.NodeSpacing,
+					EdgeNodeSpacing: opts.EdgeNodeSpacing,
+					SelfLoopSpacing: opts.SelfLoopSpacing,
 					Padding:         opts.Padding,
 				},
 			}

d2renderers/d2sketch/sketch.go

@@ -3,6 +3,7 @@ package d2sketch
 import (
 	"encoding/json"
 	"fmt"
+	"regexp"
 	"strings"
 
 	_ "embed"
@@ -33,6 +34,8 @@ fillStyle: "solid",
 bowing: 2,
 seed: 1,`
 
+var floatRE = regexp.MustCompile(`(\d+)\.(\d+)`)
+
 func (r *Runner) run(js string) (goja.Value, error) {
 	vm := (*goja.Runtime)(r)
 	return vm.RunString(js)
@@ -63,26 +66,6 @@ func DefineFillPattern() string {
 </defs>`, fillPattern)
 }
 
-func shapeStyle(shape d2target.Shape) string {
-	out := ""
-
-	if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
-		out += fmt.Sprintf(`fill:%s;`, shape.Stroke)
-		out += fmt.Sprintf(`stroke:%s;`, shape.Fill)
-	} else {
-		out += fmt.Sprintf(`fill:%s;`, shape.Fill)
-		out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
-	}
-	out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
-	out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
-	if shape.StrokeDash != 0 {
-		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(shape.StrokeWidth), shape.StrokeDash)
-		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
-	}
-
-	return out
-}
-
 func Rect(r *Runner, shape d2target.Shape) (string, error) {
 	js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
 		fill: "%s",
@@ -90,7 +73,7 @@ func Rect(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -98,7 +81,7 @@ func Rect(r *Runner, shape d2target.Shape) (string, error) {
 	for _, p := range paths {
 		output += fmt.Sprintf(
 			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
-			shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
+			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
 		)
 	}
 	output += fmt.Sprintf(
@@ -115,7 +98,7 @@ func Oval(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -123,7 +106,7 @@ func Oval(r *Runner, shape d2target.Shape) (string, error) {
 	for _, p := range paths {
 		output += fmt.Sprintf(
 			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
-			shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
+			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
 		)
 	}
 	output += fmt.Sprintf(
@@ -143,14 +126,14 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, path, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-		sketchPaths, err := computeRoughPaths(r, js)
+		sketchPaths, err := computeRoughPathData(r, js)
 		if err != nil {
 			return "", err
 		}
 		for _, p := range sketchPaths {
 			output += fmt.Sprintf(
 				`<path class="shape" d="%s" style="%s" />`,
-				p, shapeStyle(shape),
+				p, shape.CSSStyle(),
 			)
 		}
 		for _, p := range sketchPaths {
@@ -163,32 +146,22 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 	return output, nil
 }
 
-func connectionStyle(connection d2target.Connection) string {
-	out := ""
-
-	out += fmt.Sprintf(`stroke:%s;`, connection.Stroke)
-	out += fmt.Sprintf(`opacity:%f;`, connection.Opacity)
-	out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth)
-	if connection.StrokeDash != 0 {
-		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), connection.StrokeDash)
-		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
-	}
-
-	return out
-}
-
 func Connection(r *Runner, connection d2target.Connection, path, attrs string) (string, error) {
 	roughness := 1.0
 	js := fmt.Sprintf(`node = rc.path("%s", {roughness: %f, seed: 1});`, path, roughness)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
 	output := ""
+	animatedClass := ""
+	if connection.Animated {
+		animatedClass = " animated-connection"
+	}
 	for _, p := range paths {
 		output += fmt.Sprintf(
-			`<path class="connection" fill="none" d="%s" style="%s" %s/>`,
-			p, connectionStyle(connection), attrs,
+			`<path class="connection%s" fill="none" d="%s" style="%s" %s/>`,
+			animatedClass, p, connection.CSSStyle(), attrs,
 		)
 	}
 	return output, nil
@@ -203,14 +176,14 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
 	for _, p := range paths {
 		output += fmt.Sprintf(
 			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
-			shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
+			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
 		)
 	}
 
@@ -226,7 +199,7 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 		fill: "%s",
 		%s
 	});`, shape.Width, rowHeight, shape.Fill, baseRoughProps)
-	paths, err = computeRoughPaths(r, js)
+	paths, err = computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -305,7 +278,7 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 		js = fmt.Sprintf(`node = rc.line(%f, %f, %f, %f, {
 		%s
 	});`, rowBox.TopLeft.X, rowBox.TopLeft.Y, rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y, baseRoughProps)
-		paths, err = computeRoughPaths(r, js)
+		paths, err = computeRoughPathData(r, js)
 		if err != nil {
 			return "", err
 		}
@@ -331,14 +304,14 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
 	for _, p := range paths {
 		output += fmt.Sprintf(
 			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
-			shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
+			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
 		)
 	}
 
@@ -355,7 +328,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 		fill: "%s",
 		%s
 	});`, shape.Width, headerBox.Height, shape.Fill, baseRoughProps)
-	paths, err = computeRoughPaths(r, js)
+	paths, err = computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -402,7 +375,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 	js = fmt.Sprintf(`node = rc.line(%f, %f, %f, %f, {
 %s
 	});`, rowBox.TopLeft.X, rowBox.TopLeft.Y, rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y, baseRoughProps)
-	paths, err = computeRoughPaths(r, js)
+	paths, err = computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -461,38 +434,242 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
 	return output
 }
 
-func computeRoughPaths(r *Runner, js string) ([]string, error) {
+func computeRoughPathData(r *Runner, js string) ([]string, error) {
 	if _, err := r.run(js); err != nil {
 		return nil, err
 	}
-	return extractPaths(r)
+	roughPaths, err := extractRoughPaths(r)
+	if err != nil {
+		return nil, err
+	}
+	return extractPathData(roughPaths)
+}
+
+func computeRoughPaths(r *Runner, js string) ([]roughPath, error) {
+	if _, err := r.run(js); err != nil {
+		return nil, err
+	}
+	return extractRoughPaths(r)
 }
 
 type attrs struct {
 	D string `json:"d"`
 }
 
-type node struct {
-	Attrs attrs `json:"attrs"`
+type style struct {
+	Stroke      string `json:"stroke,omitempty"`
+	StrokeWidth string `json:"strokeWidth,omitempty"`
+	Fill        string `json:"fill,omitempty"`
 }
 
-func extractPaths(r *Runner) ([]string, error) {
-	val, err := r.run("JSON.stringify(node.children)")
+type roughPath struct {
+	Attrs attrs `json:"attrs"`
+	Style style `json:"style"`
+}
+
+func (rp roughPath) StyleCSS() string {
+	style := ""
+	if rp.Style.Fill != "" {
+		style += fmt.Sprintf("fill:%s;", rp.Style.Fill)
+	}
+	if rp.Style.Stroke != "" {
+		style += fmt.Sprintf("stroke:%s;", rp.Style.Stroke)
+	}
+	if rp.Style.StrokeWidth != "" {
+		style += fmt.Sprintf("stroke-width:%s;", rp.Style.StrokeWidth)
+	}
+	return style
+}
+
+func extractRoughPaths(r *Runner) ([]roughPath, error) {
+	val, err := r.run("JSON.stringify(node.children, null, '  ')")
 	if err != nil {
 		return nil, err
 	}
 
-	var nodes []node
-
-	err = json.Unmarshal([]byte(val.String()), &nodes)
+	var roughPaths []roughPath
+	err = json.Unmarshal([]byte(val.String()), &roughPaths)
 	if err != nil {
 		return nil, err
 	}
 
+	// we want to have a fixed precision to the decimals in the path data
+	for i := range roughPaths {
+		// truncate all floats in path to only use up to 6 decimal places
+		roughPaths[i].Attrs.D = floatRE.ReplaceAllStringFunc(roughPaths[i].Attrs.D, func(floatStr string) string {
+			i := strings.Index(floatStr, ".")
+			decimalLen := len(floatStr) - i - 1
+			end := i + go2.Min(decimalLen, 6)
+			return floatStr[:end+1]
+		})
+	}
+
+	return roughPaths, nil
+}
+
+func extractPathData(roughPaths []roughPath) ([]string, error) {
 	var paths []string
-	for _, n := range nodes {
-		paths = append(paths, n.Attrs.D)
+	for _, rp := range roughPaths {
+		paths = append(paths, rp.Attrs.D)
 	}
-
 	return paths, nil
 }
+
+func ArrowheadJS(r *Runner, arrowhead d2target.Arrowhead, stroke string, strokeWidth int) (arrowJS, extraJS string) {
+	// Note: selected each seed that looks the good for consistent renders
+	switch arrowhead {
+	case d2target.ArrowArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.linearPath(%s, { strokeWidth: %d, stroke: "%s", seed: 3 })`,
+			`[[-10, -4], [0, 0], [-10, 4]]`,
+			strokeWidth,
+			stroke,
+		)
+	case d2target.TriangleArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.polygon(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", seed: 2 })`,
+			`[[-10, -4], [0, 0], [-10, 4]]`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+	case d2target.DiamondArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.polygon(%s, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", seed: 1 })`,
+			`[[-20, 0], [-10, 5], [0, 0], [-10, -5], [-20, 0]]`,
+			strokeWidth,
+			stroke,
+		)
+	case d2target.FilledDiamondArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.polygon(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "zigzag", fillWeight: 4, seed: 1 })`,
+			`[[-20, 0], [-10, 5], [0, 0], [-10, -5], [-20, 0]]`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+	case d2target.CfManyRequired:
+		arrowJS = fmt.Sprintf(
+			// TODO why does fillStyle: "zigzag" error with path
+			`node = rc.path(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 4, seed: 2 })`,
+			`"M-15,-10 -15,10 M0,10 -15,0 M0,-10 -15,0"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+	case d2target.CfMany:
+		arrowJS = fmt.Sprintf(
+			`node = rc.path(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 4, seed: 8 })`,
+			`"M0,10 -15,0 M0,-10 -15,0"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+		extraJS = fmt.Sprintf(
+			`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", fillWeight: 1, seed: 4 })`,
+			strokeWidth,
+			stroke,
+		)
+	case d2target.CfOneRequired:
+		arrowJS = fmt.Sprintf(
+			`node = rc.path(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 4, seed: 2 })`,
+			`"M-15,-10 -15,10 M-10,-10 -10,10"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+	case d2target.CfOne:
+		arrowJS = fmt.Sprintf(
+			`node = rc.path(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 4, seed: 3 })`,
+			`"M-10,-10 -10,10"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+		extraJS = fmt.Sprintf(
+			`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", fillWeight: 1, seed: 5 })`,
+			strokeWidth,
+			stroke,
+		)
+	}
+	return
+}
+
+func Arrowheads(r *Runner, connection d2target.Connection, srcAdj, dstAdj *geo.Point) (string, error) {
+	arrowPaths := []string{}
+
+	if connection.SrcArrow != d2target.NoArrowhead {
+		arrowJS, extraJS := ArrowheadJS(r, connection.SrcArrow, connection.Stroke, connection.StrokeWidth)
+		if arrowJS == "" {
+			return "", nil
+		}
+
+		startingSegment := geo.NewSegment(connection.Route[0], connection.Route[1])
+		startingVector := startingSegment.ToVector().Reverse()
+		angle := startingVector.Degrees()
+
+		transform := fmt.Sprintf(`transform="translate(%f %f) rotate(%v)"`,
+			startingSegment.Start.X+srcAdj.X, startingSegment.Start.Y+srcAdj.Y, angle,
+		)
+
+		roughPaths, err := computeRoughPaths(r, arrowJS)
+		if err != nil {
+			return "", err
+		}
+		if extraJS != "" {
+			extraPaths, err := computeRoughPaths(r, extraJS)
+			if err != nil {
+				return "", err
+			}
+			roughPaths = append(roughPaths, extraPaths...)
+		}
+
+		for _, rp := range roughPaths {
+			pathStr := fmt.Sprintf(`<path class="connection" d="%s" style="%s" %s/>`,
+				rp.Attrs.D,
+				rp.StyleCSS(),
+				transform,
+			)
+			arrowPaths = append(arrowPaths, pathStr)
+		}
+	}
+
+	if connection.DstArrow != d2target.NoArrowhead {
+		arrowJS, extraJS := ArrowheadJS(r, connection.DstArrow, connection.Stroke, connection.StrokeWidth)
+		if arrowJS == "" {
+			return "", nil
+		}
+
+		length := len(connection.Route)
+		endingSegment := geo.NewSegment(connection.Route[length-2], connection.Route[length-1])
+		endingVector := endingSegment.ToVector()
+		angle := endingVector.Degrees()
+
+		transform := fmt.Sprintf(`transform="translate(%f %f) rotate(%v)"`,
+			endingSegment.End.X+dstAdj.X, endingSegment.End.Y+dstAdj.Y, angle,
+		)
+
+		roughPaths, err := computeRoughPaths(r, arrowJS)
+		if err != nil {
+			return "", err
+		}
+		if extraJS != "" {
+			extraPaths, err := computeRoughPaths(r, extraJS)
+			if err != nil {
+				return "", err
+			}
+			roughPaths = append(roughPaths, extraPaths...)
+		}
+
+		for _, rp := range roughPaths {
+			pathStr := fmt.Sprintf(`<path class="connection" d="%s" style="%s" %s/>`,
+				rp.Attrs.D,
+				rp.StyleCSS(),
+				transform,
+			)
+			arrowPaths = append(arrowPaths, pathStr)
+		}
+	}
+
+	return strings.Join(arrowPaths, " "), nil
+}

d2renderers/d2sketch/sketch_test.go

@@ -39,6 +39,11 @@ func TestSketch(t *testing.T) {
 			script: `winter.snow -> summer.sun
 		`,
 		},
+		{
+			name: "animated",
+			script: `winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true }
+		`,
+		},
 		{
 			name: "connection label",
 			script: `a -> b: hello
@@ -275,6 +280,71 @@ shipments.order_id <-> orders.id`,
   +getJobs(): "Job[]"
   +setTimeout(seconds int)
 }
+`,
+		},
+		{
+			name: "arrowheads",
+			script: `
+a: ""
+b: ""
+a.1 -- b.1: none
+a.2 <-> b.2: arrow {
+	source-arrowhead.shape: arrow
+	target-arrowhead.shape: arrow
+}
+a.3 <-> b.3: triangle {
+	source-arrowhead.shape: triangle
+	target-arrowhead.shape: triangle
+}
+a.4 <-> b.4: diamond {
+	source-arrowhead.shape: diamond
+	target-arrowhead.shape: diamond
+}
+a.5 <-> b.5: diamond filled {
+	source-arrowhead: {
+		shape: diamond
+		style.filled: true
+	}
+	target-arrowhead: {
+		shape: diamond
+		style.filled: true
+	}
+}
+a.6 <-> b.6: cf-many {
+	source-arrowhead.shape: cf-many
+	target-arrowhead.shape: cf-many
+}
+a.7 <-> b.7: cf-many-required {
+	source-arrowhead.shape: cf-many-required
+	target-arrowhead.shape: cf-many-required
+}
+a.8 <-> b.8: cf-one {
+	source-arrowhead.shape: cf-one
+	target-arrowhead.shape: cf-one
+}
+a.9 <-> b.9: cf-one-required {
+	source-arrowhead.shape: cf-one-required
+	target-arrowhead.shape: cf-one-required
+}
+`,
+		},
+		{
+			name: "opacity",
+			script: `x.style.opacity: 0.4
+y: |md
+  linux: because a PC is a terrible thing to waste
+| {
+	style.opacity: 0.4
+}
+x -> a: {
+  label: You don't have to know how the computer works,\njust how to work the computer.
+  style.opacity: 0.4
+}
+users: {
+	shape: sql_table
+	last_login: datetime
+	style.opacity: 0.4
+}
 `,
 		},
 	}

d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg

@@ -39,8 +39,8 @@ width="565" height="803" viewBox="-102 -118 565 803"><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="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210)" 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,
-knowing I can't make my satellite dish PAYMENTS!</title><g transform="translate(66 210)" 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 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3307079837)"/></g><mask id="3307079837" maskUnits="userSpaceOnUse" x="-100" y="-100" width="334" height="572">
+]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210)" 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,
+knowing I can't make my satellite dish PAYMENTS!</title><g transform="translate(66 210)" 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 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3307079837)"/></g><mask id="3307079837" maskUnits="userSpaceOnUse" x="-100" y="-100" width="334" height="572">
 <rect x="-100" y="-100" width="334" height="572" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg

@@ -39,8 +39,8 @@ width="566" height="751" viewBox="-102 -118 566 751"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210)" 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,
-knowing I can'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 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3421969999)"/></g><mask id="3421969999" maskUnits="userSpaceOnUse" x="-100" y="-100" width="334" height="572">
+]]></script><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210)" 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,
+knowing I can'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 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3421969999)"/></g><mask id="3421969999" maskUnits="userSpaceOnUse" x="-100" y="-100" width="334" height="572">
 <rect x="-100" y="-100" width="334" height="572" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

d2renderers/d2svg/class.go

@@ -80,7 +80,7 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
 
 func drawClass(writer io.Writer, targetShape d2target.Shape) {
 	fmt.Fprintf(writer, `<rect class="shape" x="%d" y="%d" width="%d" height="%d" style="%s"/>`,
-		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(targetShape))
+		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, targetShape.CSSStyle())
 
 	box := geo.NewBox(
 		geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y)),

d2renderers/d2svg/d2svg.go

@@ -347,17 +347,25 @@ func arrowheadAdjustment(start, end *geo.Point, arrowhead d2target.Arrowhead, ed
 	return v.Unit().Multiply(-distance).ToPoint()
 }
 
-// returns the path's d attribute for the given connection
-func pathData(connection d2target.Connection, idToShape map[string]d2target.Shape) string {
-	var path []string
+func getArrowheadAdjustments(connection d2target.Connection, idToShape map[string]d2target.Shape) (srcAdj, dstAdj *geo.Point) {
 	route := connection.Route
 	srcShape := idToShape[connection.Src]
 	dstShape := idToShape[connection.Dst]
 
-	sourceAdjustment := arrowheadAdjustment(route[0], route[1], connection.SrcArrow, connection.StrokeWidth, srcShape.StrokeWidth)
+	sourceAdjustment := arrowheadAdjustment(route[1], route[0], connection.SrcArrow, connection.StrokeWidth, srcShape.StrokeWidth)
+
+	targetAdjustment := arrowheadAdjustment(route[len(route)-2], route[len(route)-1], connection.DstArrow, connection.StrokeWidth, dstShape.StrokeWidth)
+	return sourceAdjustment, targetAdjustment
+}
+
+// returns the path's d attribute for the given connection
+func pathData(connection d2target.Connection, srcAdj, dstAdj *geo.Point) string {
+	var path []string
+	route := connection.Route
+
 	path = append(path, fmt.Sprintf("M %f %f",
-		route[0].X-sourceAdjustment.X,
-		route[0].Y-sourceAdjustment.Y,
+		route[0].X+srcAdj.X,
+		route[0].Y+srcAdj.Y,
 	))
 
 	if connection.IsCurve {
@@ -370,12 +378,11 @@ func pathData(connection d2target.Connection, idToShape map[string]d2target.Shap
 			))
 		}
 		// final curve target adjustment
-		targetAdjustment := arrowheadAdjustment(route[i+1], route[i+2], connection.DstArrow, connection.StrokeWidth, dstShape.StrokeWidth)
 		path = append(path, fmt.Sprintf("C %f %f %f %f %f %f",
 			route[i].X, route[i].Y,
 			route[i+1].X, route[i+1].Y,
-			route[i+2].X+targetAdjustment.X,
-			route[i+2].Y+targetAdjustment.Y,
+			route[i+2].X+dstAdj.X,
+			route[i+2].Y+dstAdj.Y,
 		))
 	} else {
 		for i := 1; i < len(route)-1; i++ {
@@ -427,12 +434,9 @@ func pathData(connection d2target.Connection, idToShape map[string]d2target.Shap
 		}
 
 		lastPoint := route[len(route)-1]
-		secondToLastPoint := route[len(route)-2]
-
-		targetAdjustment := arrowheadAdjustment(secondToLastPoint, lastPoint, connection.DstArrow, connection.StrokeWidth, dstShape.StrokeWidth)
 		path = append(path, fmt.Sprintf("L %f %f",
-			lastPoint.X+targetAdjustment.X,
-			lastPoint.Y+targetAdjustment.Y,
+			lastPoint.X+dstAdj.X,
+			lastPoint.Y+dstAdj.Y,
 		))
 	}
 
@@ -448,7 +452,11 @@ func makeLabelMask(labelTL *geo.Point, width, height int) string {
 }
 
 func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, _ error) {
-	fmt.Fprintf(writer, `<g id="%s">`, svg.EscapeText(connection.ID))
+	opacityStyle := ""
+	if connection.Opacity != 1.0 {
+		opacityStyle = fmt.Sprintf(" style='opacity:%f'", connection.Opacity)
+	}
+	fmt.Fprintf(writer, `<g id="%s"%s>`, svg.EscapeText(connection.ID), opacityStyle)
 	var markerStart string
 	if connection.SrcArrow != d2target.NoArrowhead {
 		id := arrowheadMarkerID(false, connection)
@@ -488,21 +496,29 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		}
 	}
 
-	path := pathData(connection, idToShape)
-	attrs := fmt.Sprintf(`%s%smask="url(#%s)"`,
-		markerStart,
-		markerEnd,
-		labelMaskID,
-	)
+	srcAdj, dstAdj := getArrowheadAdjustments(connection, idToShape)
+	path := pathData(connection, srcAdj, dstAdj)
+	mask := fmt.Sprintf(`mask="url(#%s)"`, labelMaskID)
 	if sketchRunner != nil {
-		out, err := d2sketch.Connection(sketchRunner, connection, path, attrs)
+		out, err := d2sketch.Connection(sketchRunner, connection, path, mask)
 		if err != nil {
 			return "", err
 		}
-		fmt.Fprintf(writer, out)
+		fmt.Fprint(writer, out)
+
+		// render sketch arrowheads separately
+		arrowPaths, err := d2sketch.Arrowheads(sketchRunner, connection, srcAdj, dstAdj)
+		if err != nil {
+			return "", err
+		}
+		fmt.Fprint(writer, arrowPaths)
 	} else {
-		fmt.Fprintf(writer, `<path d="%s" class="connection" style="fill:none;%s" %s/>`,
-			path, connectionStyle(connection), attrs)
+		animatedClass := ""
+		if connection.Animated {
+			animatedClass = " animated-connection"
+		}
+		fmt.Fprintf(writer, `<path d="%s" class="connection%s" style="fill:none;%s" %s%s%s/>`,
+			path, animatedClass, connection.CSSStyle(), markerStart, markerEnd, mask)
 	}
 
 	if connection.Label != "" {
@@ -622,7 +638,7 @@ func render3dRect(targetShape d2target.Shape) string {
 	)
 	border := targetShape
 	border.Fill = "none"
-	borderStyle := shapeStyle(border)
+	borderStyle := border.CSSStyle()
 	renderedBorder := fmt.Sprintf(`<path d="%s" style="%s"/>`,
 		strings.Join(borderSegments, " "), borderStyle)
 
@@ -643,7 +659,7 @@ func render3dRect(targetShape d2target.Shape) string {
 	mainShape := targetShape
 	mainShape.Stroke = "none"
 	mainRect := fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" style="%s" mask="url(#%s)"/>`,
-		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(mainShape), maskID,
+		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, mainShape.CSSStyle(), maskID,
 	)
 
 	// render the side shapes in the darkened color without stroke and the border mask
@@ -668,7 +684,7 @@ func render3dRect(targetShape d2target.Shape) string {
 	sideShape.Fill = darkerColor
 	sideShape.Stroke = "none"
 	renderedSides := fmt.Sprintf(`<polygon points="%s" style="%s" mask="url(#%s)"/>`,
-		strings.Join(sidePoints, " "), shapeStyle(sideShape), maskID)
+		strings.Join(sidePoints, " "), sideShape.CSSStyle(), maskID)
 
 	return borderMask + mainRect + renderedSides + renderedBorder
 }
@@ -679,11 +695,16 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		fmt.Fprintf(writer, `<a href="%s" xlink:href="%[1]s">`, targetShape.Link)
 		closingTag += "</a>"
 	}
-	fmt.Fprintf(writer, `<g id="%s">`, svg.EscapeText(targetShape.ID))
+	// Opacity is a unique style, it applies to everything for a shape
+	opacityStyle := ""
+	if targetShape.Opacity != 1.0 {
+		opacityStyle = fmt.Sprintf(" style='opacity:%f'", targetShape.Opacity)
+	}
+	fmt.Fprintf(writer, `<g id="%s"%s>`, svg.EscapeText(targetShape.ID), opacityStyle)
 	tl := geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y))
 	width := float64(targetShape.Width)
 	height := float64(targetShape.Height)
-	style := shapeStyle(targetShape)
+	style := targetShape.CSSStyle()
 	shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[targetShape.Type]
 
 	s := shape.NewShape(shapeType, geo.NewBox(tl, width, height))
@@ -723,6 +744,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		} else {
 			drawClass(writer, targetShape)
 		}
+		addAppendixItems(writer, targetShape)
 		fmt.Fprintf(writer, `</g>`)
 		fmt.Fprintf(writer, closingTag)
 		return labelMask, nil
@@ -736,6 +758,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		} else {
 			drawTable(writer, targetShape)
 		}
+		addAppendixItems(writer, targetShape)
 		fmt.Fprintf(writer, `</g>`)
 		fmt.Fprintf(writer, closingTag)
 		return labelMask, nil
@@ -847,7 +870,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		if targetShape.Type == d2target.ShapeCode {
 			lexer := lexers.Get(targetShape.Language)
 			if lexer == nil {
-				return labelMask, fmt.Errorf("code snippet lexer for %s not found", targetShape.Language)
+				lexer = lexers.Fallback
 			}
 			style := styles.Get("github")
 			if style == nil {
@@ -865,7 +888,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			svgStyles := styleToSVG(style)
 			containerStyle := fmt.Sprintf(`stroke: %s;fill:%s`, targetShape.Stroke, style.Get(chroma.Background).Background.String())
 
-			fmt.Fprintf(writer, `<g transform="translate(%f %f)" style="opacity:%f">`, box.TopLeft.X, box.TopLeft.Y, targetShape.Opacity)
+			fmt.Fprintf(writer, `<g transform="translate(%f %f)">`, box.TopLeft.X, box.TopLeft.Y)
 			fmt.Fprintf(writer, `<rect class="shape" width="%d" height="%d" style="%s" />`,
 				targetShape.Width, targetShape.Height, containerStyle)
 			// Padding
@@ -890,7 +913,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			if err != nil {
 				return labelMask, err
 			}
-			fmt.Fprintf(writer, `<g transform="translate(%f %f)" style="opacity:%f">`, box.TopLeft.X, box.TopLeft.Y, targetShape.Opacity)
+			fmt.Fprintf(writer, `<g transform="translate(%f %f)">`, box.TopLeft.X, box.TopLeft.Y)
 			fmt.Fprint(writer, render)
 			fmt.Fprintf(writer, "</g>")
 		} else if targetShape.Type == d2target.ShapeText && targetShape.Language != "" {
@@ -935,29 +958,33 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		}
 	}
 
-	rightPadForTooltip := 0
-	if targetShape.Tooltip != "" {
-		rightPadForTooltip = 2 * appendixIconRadius
-		fmt.Fprintf(writer, `<g transform="translate(%d %d)" class="appendix-icon">%s</g>`,
-			targetShape.Pos.X+targetShape.Width-appendixIconRadius,
-			targetShape.Pos.Y-appendixIconRadius,
-			TooltipIcon,
-		)
-		fmt.Fprintf(writer, `<title>%s</title>`, targetShape.Tooltip)
-	}
-
-	if targetShape.Link != "" {
-		fmt.Fprintf(writer, `<g transform="translate(%d %d)" class="appendix-icon">%s</g>`,
-			targetShape.Pos.X+targetShape.Width-appendixIconRadius-rightPadForTooltip,
-			targetShape.Pos.Y-appendixIconRadius,
-			LinkIcon,
-		)
-	}
+	addAppendixItems(writer, targetShape)
 
 	fmt.Fprintf(writer, closingTag)
 	return labelMask, nil
 }
 
+func addAppendixItems(writer io.Writer, shape d2target.Shape) {
+	rightPadForTooltip := 0
+	if shape.Tooltip != "" {
+		rightPadForTooltip = 2 * appendixIconRadius
+		fmt.Fprintf(writer, `<g transform="translate(%d %d)" class="appendix-icon">%s</g>`,
+			shape.Pos.X+shape.Width-appendixIconRadius,
+			shape.Pos.Y-appendixIconRadius,
+			TooltipIcon,
+		)
+		fmt.Fprintf(writer, `<title>%s</title>`, shape.Tooltip)
+	}
+
+	if shape.Link != "" {
+		fmt.Fprintf(writer, `<g transform="translate(%d %d)" class="appendix-icon">%s</g>`,
+			shape.Pos.X+shape.Width-appendixIconRadius-rightPadForTooltip,
+			shape.Pos.Y-appendixIconRadius,
+			LinkIcon,
+		)
+	}
+}
+
 func RenderText(text string, x, height float64) string {
 	if !strings.Contains(text, "\n") {
 		return svg.EscapeText(text)
@@ -979,43 +1006,6 @@ func RenderText(text string, x, height float64) string {
 	return strings.Join(rendered, "")
 }
 
-func shapeStyle(shape d2target.Shape) string {
-	out := ""
-
-	if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
-		// Fill is used for header fill in these types
-		// This fill property is just background of rows
-		out += fmt.Sprintf(`fill:%s;`, shape.Stroke)
-		// Stroke (border) of these shapes should match the header fill
-		out += fmt.Sprintf(`stroke:%s;`, shape.Fill)
-	} else {
-		out += fmt.Sprintf(`fill:%s;`, shape.Fill)
-		out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
-	}
-	out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
-	out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
-	if shape.StrokeDash != 0 {
-		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(shape.StrokeWidth), shape.StrokeDash)
-		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
-	}
-
-	return out
-}
-
-func connectionStyle(connection d2target.Connection) string {
-	out := ""
-
-	out += fmt.Sprintf(`stroke:%s;`, connection.Stroke)
-	out += fmt.Sprintf(`opacity:%f;`, connection.Opacity)
-	out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth)
-	if connection.StrokeDash != 0 {
-		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), connection.StrokeDash)
-		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
-	}
-
-	return out
-}
-
 func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
 	content := buf.String()
 	buf.WriteString(`<style type="text/css"><![CDATA[`)
@@ -1055,6 +1045,23 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
 		}
 	}
 
+	triggers = []string{
+		`animated-connection`,
+	}
+
+	for _, t := range triggers {
+		if strings.Contains(content, t) {
+			buf.WriteString(`
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 0;
+  }
+}
+`)
+			break
+		}
+	}
+
 	triggers = []string{
 		`appendix-icon`,
 	}

d2renderers/d2svg/table.go

@@ -81,7 +81,7 @@ func tableRow(shape d2target.Shape, box *geo.Box, nameText, typeText, constraint
 
 func drawTable(writer io.Writer, targetShape d2target.Shape) {
 	fmt.Fprintf(writer, `<rect class="shape" x="%d" y="%d" width="%d" height="%d" style="%s"/>`,
-		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(targetShape))
+		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, targetShape.CSSStyle())
 
 	box := geo.NewBox(
 		geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y)),

d2target/d2target.go

@@ -15,6 +15,7 @@ import (
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
 	"oss.terrastruct.com/d2/lib/shape"
+	"oss.terrastruct.com/d2/lib/svg"
 )
 
 const (
@@ -159,6 +160,28 @@ type Shape struct {
 	NeutralAccentColor   string `json:"neutralAccentColor,omitempty"`
 }
 
+func (s Shape) CSSStyle() string {
+	out := ""
+
+	if s.Type == ShapeSQLTable || s.Type == ShapeClass {
+		// Fill is used for header fill in these types
+		// This fill property is just background of rows
+		out += fmt.Sprintf(`fill:%s;`, s.Stroke)
+		// Stroke (border) of these shapes should match the header fill
+		out += fmt.Sprintf(`stroke:%s;`, s.Fill)
+	} else {
+		out += fmt.Sprintf(`fill:%s;`, s.Fill)
+		out += fmt.Sprintf(`stroke:%s;`, s.Stroke)
+	}
+	out += fmt.Sprintf(`stroke-width:%d;`, s.StrokeWidth)
+	if s.StrokeDash != 0 {
+		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(s.StrokeWidth), s.StrokeDash)
+		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
+	}
+
+	return out
+}
+
 func (s *Shape) SetType(t string) {
 	// Some types are synonyms of other types, but with hinting for autolayout
 	// They should only have one representation in the final export
@@ -251,6 +274,31 @@ func BaseConnection() *Connection {
 	}
 }
 
+func (c Connection) CSSStyle() string {
+	out := ""
+
+	out += fmt.Sprintf(`stroke:%s;`, c.Stroke)
+	out += fmt.Sprintf(`stroke-width:%d;`, c.StrokeWidth)
+	strokeDash := c.StrokeDash
+	if strokeDash == 0 && c.Animated {
+		strokeDash = 5
+	}
+	if strokeDash != 0 {
+		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(c.StrokeWidth), strokeDash)
+		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
+
+		if c.Animated {
+			dashOffset := -10
+			if c.SrcArrow != NoArrowhead && c.DstArrow == NoArrowhead {
+				dashOffset = 10
+			}
+			out += fmt.Sprintf(`stroke-dashoffset:%f;`, float64(dashOffset)*(dashSize+gapSize))
+			out += fmt.Sprintf(`animation: dashdraw %fs linear infinite;`, gapSize*0.5)
+		}
+	}
+	return out
+}
+
 func (c *Connection) GetLabelTopLeft() *geo.Point {
 	return label.Position(c.LabelPosition).GetPointOnRoute(
 		c.Route,

docs/CONTRIBUTING.md

@@ -88,6 +88,12 @@ Run: `./ci/test.sh`
 CI runs tests with `-race` to catch potential race conditions. It's much slower, but if
 your machine can run it locally, you can do so with `./make.sh race`.
 
+If you add a new test and run, it will show failure. That's because the vast majority of
+D2's tests are comparing outputs. You don't define the expected output manually. The
+testing library generates it and it's checked into version control if it looks right. So
+for the first run of a new test, it has no expected output, and will fail. To accept the
+  result as the expected, run the test with environment variable `TESTDATA_ACCEPT=1`.
+
 #### Chaos tests
 
 D2 has [chaos tests](https://en.wikipedia.org/wiki/Chaos_engineering) which produce random

e2etests/regression_test.go

@@ -302,6 +302,98 @@ k8s -> osvc: keycloak
 k8s -> osvc: heptapod
 k8s -> osvc: harbor
 k8s -> osvc: vault
+`,
+		},
+		{
+			name: "no-lexer",
+			script: `x: |d2
+  x -> y
+|
+`,
+		},
+		{
+			name: "dagre_broken_arrowhead",
+			script: `
+a.b -> a.c: "line 1\nline 2\nline 3\nline 4" {
+	style: {
+		font-color: red
+		stroke: red
+	}
+	target-arrowhead: {
+		shape: diamond
+	}
+}
+a.1 -> a.c
+a.2 <-> a.c
+a.c {
+	style.stroke: white
+	d
+}
+`,
+		},
+		{
+			name: "code_leading_trailing_newlines",
+			script: `
+hello world: |python
+
+
+  # 2 leading, 2 trailing
+  def hello():
+
+    print "world"
+
+
+|
+
+no trailing: |python
+
+
+  # 2 leading
+  def hello():
+
+    print "world"
+|
+
+no leading: |python
+  # 2 trailing
+  def hello():
+
+    print "world"
+
+
+|
+`,
+		},
+		{
+			name: "md_h1_li_li",
+			script: mdTestScript(`
+# hey
+- they
+	1. they
+`),
+		},
+		{
+			name: "elk_loop_panic",
+			script: `x: {
+  a
+  b
+}
+
+x.a -> x.a
+`,
+		},
+		{
+			name: "opacity-on-label",
+			script: `x.style.opacity: 0.4
+y: |md
+  linux: because a PC is a terrible thing to waste
+| {
+	style.opacity: 0.4
+}
+x -> a: {
+  label: You don't have to know how the computer works,\njust how to work the computer.
+  style.opacity: 0.4
+}
 `,
 		},
 	}

e2etests/stable_test.go

@@ -1786,6 +1786,82 @@ c <-> d: filled-circle {
     style.filled: true
   }
 }`,
+	},
+		{
+			name: "circle_arrowhead",
+			script: `
+a <-> b: circle {
+  source-arrowhead: {
+    shape: circle
+  }
+  target-arrowhead: {
+    shape: circle
+  }
+}
+
+c <-> d: filled-circle {
+  source-arrowhead: {
+    shape: circle
+    style.filled: true
+  }
+  target-arrowhead: {
+    shape: circle
+    style.filled: true
+  }
+}`,
+		},
+		{
+			name: "animated",
+			script: `
+your love life will be -> happy: { style.animated: true }
+your love life will be -> harmonious: { style.animated: true }
+
+boredom <- immortality: { style.animated: true }
+
+Friday <-> Monday: { style.animated: true }
+
+Insomnia -- Sleep: { style.animated: true }
+Insomnia -- Wake: {
+	style: {
+		animated: true
+		stroke-width: 2
+	}
+}
+
+Insomnia -- Dream: {
+	style: {
+		animated: true
+		stroke-width: 8
+	}
+}
+
+Listen <-> Talk: {
+	style.animated: true
+	source-arrowhead.shape: cf-one
+	target-arrowhead.shape: diamond
+	label: hear
+}
+`,
+		},
+		{
+			name: "sql_table_tooltip_animated",
+			script: `
+x: {
+  shape: sql_table
+	y
+	tooltip: I like turtles
+}
+
+a: {
+  shape: sql_table
+	b
+}
+
+x.y -> a.b: {
+  style.animated: true
+	target-arrowhead.shape: cf-many
+}
+`,
 		},
 	}
 

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

@@ -0,0 +1,124 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "hello world",
+      "type": "code",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 239,
+      "height": 150,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "\n\n# 2 leading, 2 trailing\ndef hello():\n\n  print \"world\"\n\n",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "python",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 239,
+      "labelHeight": 150,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "no trailing",
+      "type": "code",
+      "pos": {
+        "x": 299,
+        "y": 16
+      },
+      "width": 160,
+      "height": 118,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "\n\n# 2 leading\ndef hello():\n\n  print \"world\"",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "python",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 160,
+      "labelHeight": 118,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "no leading",
+      "type": "code",
+      "pos": {
+        "x": 519,
+        "y": 16
+      },
+      "width": 160,
+      "height": 118,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "# 2 trailing\ndef hello():\n\n  print \"world\"\n\n",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "python",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 160,
+      "labelHeight": 118,
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}

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

@@ -0,0 +1,124 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "hello world",
+      "type": "code",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 239,
+      "height": 150,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "\n\n# 2 leading, 2 trailing\ndef hello():\n\n  print \"world\"\n\n",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "python",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 239,
+      "labelHeight": 150,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "no trailing",
+      "type": "code",
+      "pos": {
+        "x": 271,
+        "y": 28
+      },
+      "width": 160,
+      "height": 118,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "\n\n# 2 leading\ndef hello():\n\n  print \"world\"",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "python",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 160,
+      "labelHeight": 118,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "no leading",
+      "type": "code",
+      "pos": {
+        "x": 451,
+        "y": 28
+      },
+      "width": 160,
+      "height": 118,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "# 2 trailing\ndef hello():\n\n  print \"world\"\n\n",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "python",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 160,
+      "labelHeight": 118,
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}

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

@@ -0,0 +1,392 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "a",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 571,
+      "height": 648,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 17,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "a.c",
+      "type": "",
+      "pos": {
+        "x": 40,
+        "y": 359
+      },
+      "width": 478,
+      "height": 235,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "white",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "c",
+      "fontSize": 24,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 15,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.c.d",
+      "type": "",
+      "pos": {
+        "x": 236,
+        "y": 413
+      },
+      "width": 114,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "d",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 14,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "a.b",
+      "type": "",
+      "pos": {
+        "x": 64,
+        "y": 55
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.1",
+      "type": "",
+      "pos": {
+        "x": 237,
+        "y": 55
+      },
+      "width": 112,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "1",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.2",
+      "type": "",
+      "pos": {
+        "x": 409,
+        "y": 55
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "2",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [
+    {
+      "id": "a.(b -> c)[0]",
+      "src": "a.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a.c",
+      "dstArrow": "diamond",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "red",
+      "label": "line 1\nline 2\nline 3\nline 4",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "red",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 36,
+      "labelHeight": 69,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 120,
+          "y": 181.5
+        },
+        {
+          "x": 120,
+          "y": 251.9
+        },
+        {
+          "x": 120,
+          "y": 287.5
+        },
+        {
+          "x": 120,
+          "y": 359.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "a.(1 -> c)[0]",
+      "src": "a.1",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a.c",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 292.5,
+          "y": 181.5
+        },
+        {
+          "x": 292.5,
+          "y": 251.9
+        },
+        {
+          "x": 292.5,
+          "y": 287.5
+        },
+        {
+          "x": 292.5,
+          "y": 359.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "a.(2 <-> c)[0]",
+      "src": "a.2",
+      "srcArrow": "triangle",
+      "srcLabel": "",
+      "dst": "a.c",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 465,
+          "y": 181.5
+        },
+        {
+          "x": 465,
+          "y": 251.9
+        },
+        {
+          "x": 465,
+          "y": 287.5
+        },
+        {
+          "x": 465,
+          "y": 359.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}

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

@@ -0,0 +1,381 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "a",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 490,
+      "height": 878,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 17,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "a.c",
+      "type": "",
+      "pos": {
+        "x": 106,
+        "y": 539
+      },
+      "width": 264,
+      "height": 276,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "white",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "c",
+      "fontSize": 24,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 15,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.c.d",
+      "type": "",
+      "pos": {
+        "x": 181,
+        "y": 614
+      },
+      "width": 114,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "d",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 14,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "a.b",
+      "type": "",
+      "pos": {
+        "x": 87,
+        "y": 87
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.1",
+      "type": "",
+      "pos": {
+        "x": 182,
+        "y": 313
+      },
+      "width": 112,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "1",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.2",
+      "type": "",
+      "pos": {
+        "x": 314,
+        "y": 313
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "2",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [
+    {
+      "id": "a.(b -> c)[0]",
+      "src": "a.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a.c",
+      "dstArrow": "diamond",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "red",
+      "label": "line 1\nline 2\nline 3\nline 4",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "red",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 36,
+      "labelHeight": 69,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 143.5,
+          "y": 213
+        },
+        {
+          "x": 143.5,
+          "y": 489
+        },
+        {
+          "x": 172.5,
+          "y": 489
+        },
+        {
+          "x": 172.5,
+          "y": 539
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "a.(1 -> c)[0]",
+      "src": "a.1",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a.c",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 238.5,
+          "y": 439
+        },
+        {
+          "x": 238.5,
+          "y": 539
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "a.(2 <-> c)[0]",
+      "src": "a.2",
+      "srcArrow": "triangle",
+      "srcLabel": "",
+      "dst": "a.c",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 371,
+          "y": 439
+        },
+        {
+          "x": 371,
+          "y": 489
+        },
+        {
+          "x": 304.5,
+          "y": 489
+        },
+        {
+          "x": 304.5,
+          "y": 539
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}

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

@@ -39,7 +39,7 @@ width="2832" height="441" viewBox="-102 -102 2832 441"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="build_workflow"><g class="shape" ><rect x="0" y="0" width="2628" height="237" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1314.000000" y="33.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="50" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="125.000000" 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="698" y="50" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="832.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1314" y="50" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1379.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1773" y="50" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1882.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2369" y="50" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2446.500000" y="125.000000" 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 437.500000 118.500000 C 539.900000 118.500000 592.300000 118.500000 693.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="567.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 968.500000 118.500000 C 1105.300000 118.500000 1174.700000 118.500000 1309.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="1140.000000" y="124.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 1449.500000 118.500000 C 1575.900000 118.500000 1641.300000 118.500000 1768.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="1609.500000" y="124.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 1993.500000 118.500000 C 2141.900000 118.500000 2217.300000 118.500000 2364.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="2180.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="2839978883" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2832" height="441">
+]]></script><g id="build_workflow"><g class="shape" ><rect x="0" y="0" width="2628" height="237" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="1314.000000" y="33.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="50" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="125.000000" 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="698" y="50" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="832.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1314" y="50" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1379.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1773" y="50" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1882.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2369" y="50" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="2446.500000" y="125.000000" 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 437.500000 118.500000 C 539.900000 118.500000 592.300000 118.500000 693.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="567.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 968.500000 118.500000 C 1105.300000 118.500000 1174.700000 118.500000 1309.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="1140.000000" y="124.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 1449.500000 118.500000 C 1575.900000 118.500000 1641.300000 118.500000 1768.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="1609.500000" y="124.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 1993.500000 118.500000 C 2141.900000 118.500000 2217.300000 118.500000 2364.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2839978883)"/><text class="text-italic" x="2180.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="2839978883" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2832" height="441">
 <rect x="-100" y="-100" width="2832" height="441" fill="white"></rect>
 <rect x="540.000000" y="108.000000" width="54" height="21" fill="black"></rect>
 <rect x="1071.000000" y="108.000000" width="138" height="21" fill="black"></rect>

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

@@ -9,7 +9,7 @@
         "x": 12,
         "y": 12
       },
-      "width": 1893,
+      "width": 2533,
       "height": 287,
       "opacity": 1,
       "strokeDash": 0,
@@ -86,7 +86,7 @@
       "id": "build_workflow.GHA",
       "type": "",
       "pos": {
-        "x": 511,
+        "x": 671,
         "y": 87
       },
       "width": 269,
@@ -126,7 +126,7 @@
       "id": "build_workflow.S3",
       "type": "",
       "pos": {
-        "x": 958,
+        "x": 1278,
         "y": 87
       },
       "width": 131,
@@ -166,7 +166,7 @@
       "id": "build_workflow.Terraform",
       "type": "",
       "pos": {
-        "x": 1248,
+        "x": 1728,
         "y": 87
       },
       "width": 218,
@@ -206,7 +206,7 @@
       "id": "build_workflow.AWS",
       "type": "",
       "pos": {
-        "x": 1675,
+        "x": 2315,
         "y": 87
       },
       "width": 155,
@@ -274,7 +274,7 @@
           "y": 155.5
         },
         {
-          "x": 511,
+          "x": 671,
           "y": 155.5
         }
       ],
@@ -309,11 +309,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 780,
+          "x": 940,
           "y": 155.5
         },
         {
-          "x": 958,
+          "x": 1278,
           "y": 155.5
         }
       ],
@@ -348,11 +348,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 1089,
+          "x": 1409,
           "y": 155.5
         },
         {
-          "x": 1248,
+          "x": 1728,
           "y": 155.5
         }
       ],
@@ -387,11 +387,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 1466,
+          "x": 1946,
           "y": 155.5
         },
         {
-          "x": 1675,
+          "x": 2315,
           "y": 155.5
         }
       ],

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

@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="2097" height="491" viewBox="-90 -90 2097 491"><style type="text/css">
+width="2737" height="491" viewBox="-90 -90 2737 491"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -39,12 +39,12 @@ width="2097" height="491" viewBox="-90 -90 2097 491"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="build_workflow"><g class="shape" ><rect x="12" y="12" width="1893" height="287" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="958.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="87" y="87" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="162.000000" 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="511" y="87" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="645.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="958" y="87" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1023.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1248" y="87" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1357.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1675" y="87" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1752.500000" y="162.000000" 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 419.000000 155.500000 L 507.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="464.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 782.000000 155.500000 L 954.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="869.000000" y="161.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 1093.000000 155.500000 L 1244.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1168.500000" y="161.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 1468.000000 155.500000 L 1671.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1570.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="1960525210" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2097" height="491">
-<rect x="-100" y="-100" width="2097" height="491" fill="white"></rect>
-<rect x="437.000000" y="145.000000" width="54" height="21" fill="black"></rect>
-<rect x="800.000000" y="145.000000" width="138" height="21" fill="black"></rect>
-<rect x="1109.000000" y="145.000000" width="119" height="21" fill="black"></rect>
-<rect x="1486.000000" y="145.000000" width="169" height="21" fill="black"></rect>
+]]></script><g id="build_workflow"><g class="shape" ><rect x="12" y="12" width="2533" height="287" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="1278.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="87" y="87" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="162.000000" 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="671" y="87" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="805.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1278" y="87" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1343.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1728" y="87" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1837.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2315" y="87" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="2392.500000" y="162.000000" 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 419.000000 155.500000 L 667.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1143898595)"/><text class="text-italic" x="544.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 942.000000 155.500000 L 1274.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1143898595)"/><text class="text-italic" x="1109.000000" y="161.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 1413.000000 155.500000 L 1724.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1143898595)"/><text class="text-italic" x="1568.500000" y="161.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 1948.000000 155.500000 L 2311.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1143898595)"/><text class="text-italic" x="2130.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="1143898595" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2737" height="491">
+<rect x="-100" y="-100" width="2737" height="491" fill="white"></rect>
+<rect x="517.000000" y="145.000000" width="54" height="21" fill="black"></rect>
+<rect x="1040.000000" y="145.000000" width="138" height="21" fill="black"></rect>
+<rect x="1509.000000" y="145.000000" width="119" height="21" fill="black"></rect>
+<rect x="2046.000000" y="145.000000" width="169" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";

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

@@ -39,7 +39,7 @@ width="1431" height="572" viewBox="-102 -102 1431 572"><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="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="75.500000" dy="0.000000">ninety</tspan><tspan x="75.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="211" y="8" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="74.000000" 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="422" y="0" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="503.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="503.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="503.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="644" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="721.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="864" y="242" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.500000" y="308.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="858" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.000000" y="74.000000" 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="1072" y="8" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1149.500000" y="74.000000" 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 721.000000 136.000000 C 721.000000 180.400000 749.500000 207.049065 859.962840 265.377574" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 935.000000 136.000000 C 935.000000 180.400000 935.000000 202.000000 935.000000 238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 1149.500000 136.000000 C 1149.500000 180.400000 1120.900000 207.000000 1010.042356 265.142121" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><mask id="4049001157" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1431" height="572">
+]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0" y="0" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="75.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="75.500000" dy="0.000000">ninety</tspan><tspan x="75.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="211" y="8" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="74.000000" 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="422" y="0" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="503.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="503.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="503.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="644" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="721.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="864" y="242" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="935.500000" y="308.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="858" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="935.000000" y="74.000000" 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="1072" y="8" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1149.500000" y="74.000000" 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 721.000000 136.000000 C 721.000000 180.400000 749.500000 207.049065 859.962840 265.377574" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 935.000000 136.000000 C 935.000000 180.400000 935.000000 202.000000 935.000000 238.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 1149.500000 136.000000 C 1149.500000 180.400000 1120.900000 207.000000 1010.042356 265.142121" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><mask id="4049001157" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1431" height="572">
 <rect x="-100" y="-100" width="1431" height="572" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="1231" height="572" viewBox="-90 -90 1231 572"><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="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="87.500000" dy="0.000000">ninety</tspan><tspan x="87.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="183" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="258.500000" y="86.000000" 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="354" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="435.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="435.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="536" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="613.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="715" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="786.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="710" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="787.000000" y="94.000000" 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="884" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="961.500000" y="94.000000" 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 613.000000 156.000000 L 613.000000 194.000000 S 613.000000 204.000000 623.000000 204.000000 L 741.250000 204.000000 S 751.250000 204.000000 751.250000 214.000000 L 751.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 787.000000 156.000000 L 787.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 961.500000 156.000000 L 961.500000 194.000000 S 961.500000 204.000000 951.500000 204.000000 L 832.750000 204.000000 S 822.750000 204.000000 822.750000 214.000000 L 822.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><mask id="3106414556" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1231" height="572">
+]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="87.500000" dy="0.000000">ninety</tspan><tspan x="87.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="183" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="258.500000" y="86.000000" 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="354" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="435.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="435.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="536" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="613.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="715" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="786.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="710" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="787.000000" y="94.000000" 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="884" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="961.500000" y="94.000000" 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 613.000000 156.000000 L 613.000000 194.000000 S 613.000000 204.000000 623.000000 204.000000 L 741.250000 204.000000 S 751.250000 204.000000 751.250000 214.000000 L 751.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 787.000000 156.000000 L 787.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 961.500000 156.000000 L 961.500000 194.000000 S 961.500000 204.000000 951.500000 204.000000 L 832.750000 204.000000 S 822.750000 204.000000 822.750000 214.000000 L 822.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><mask id="3106414556" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1231" height="572">
 <rect x="-100" y="-100" width="1231" height="572" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -10,7 +10,7 @@
         "y": 12
       },
       "width": 480,
-      "height": 1099,
+      "height": 1739,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -87,7 +87,7 @@
       "type": "",
       "pos": {
         "x": 117,
-        "y": 290
+        "y": 450
       },
       "width": 269,
       "height": 137,
@@ -127,7 +127,7 @@
       "type": "",
       "pos": {
         "x": 186,
-        "y": 493
+        "y": 813
       },
       "width": 131,
       "height": 137,
@@ -167,7 +167,7 @@
       "type": "",
       "pos": {
         "x": 143,
-        "y": 696
+        "y": 1176
       },
       "width": 218,
       "height": 137,
@@ -207,7 +207,7 @@
       "type": "",
       "pos": {
         "x": 174,
-        "y": 899
+        "y": 1539
       },
       "width": 155,
       "height": 137,
@@ -247,10 +247,10 @@
       "type": "",
       "pos": {
         "x": 512,
-        "y": 175
+        "y": 335
       },
       "width": 421,
-      "height": 773,
+      "height": 1093,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -287,7 +287,7 @@
       "type": "",
       "pos": {
         "x": 587,
-        "y": 250
+        "y": 410
       },
       "width": 271,
       "height": 137,
@@ -327,7 +327,7 @@
       "type": "",
       "pos": {
         "x": 588,
-        "y": 453
+        "y": 773
       },
       "width": 269,
       "height": 137,
@@ -367,7 +367,7 @@
       "type": "",
       "pos": {
         "x": 645,
-        "y": 736
+        "y": 1216
       },
       "width": 155,
       "height": 137,
@@ -407,10 +407,10 @@
       "type": "",
       "pos": {
         "x": 953,
-        "y": 215
+        "y": 375
       },
       "width": 684,
-      "height": 693,
+      "height": 1013,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -447,7 +447,7 @@
       "type": "",
       "pos": {
         "x": 1175,
-        "y": 290
+        "y": 450
       },
       "width": 238,
       "height": 137,
@@ -487,7 +487,7 @@
       "type": "",
       "pos": {
         "x": 1160,
-        "y": 493
+        "y": 813
       },
       "width": 269,
       "height": 137,
@@ -527,7 +527,7 @@
       "type": "",
       "pos": {
         "x": 1217,
-        "y": 696
+        "y": 1176
       },
       "width": 155,
       "height": 137,
@@ -595,7 +595,7 @@
         },
         {
           "x": 252,
-          "y": 290
+          "y": 450
         }
       ],
       "animated": false,
@@ -630,11 +630,11 @@
       "route": [
         {
           "x": 252,
-          "y": 427
+          "y": 587
         },
         {
           "x": 252,
-          "y": 493
+          "y": 813
         }
       ],
       "animated": false,
@@ -669,11 +669,11 @@
       "route": [
         {
           "x": 252,
-          "y": 630
+          "y": 950
         },
         {
           "x": 252,
-          "y": 696
+          "y": 1176
         }
       ],
       "animated": false,
@@ -708,11 +708,11 @@
       "route": [
         {
           "x": 252,
-          "y": 833
+          "y": 1313
         },
         {
           "x": 252,
-          "y": 899
+          "y": 1539
         }
       ],
       "animated": false,
@@ -747,11 +747,11 @@
       "route": [
         {
           "x": 722.5,
-          "y": 387
+          "y": 547
         },
         {
           "x": 722.5,
-          "y": 453
+          "y": 773
         }
       ],
       "animated": false,
@@ -786,11 +786,11 @@
       "route": [
         {
           "x": 722.5,
-          "y": 590
+          "y": 910
         },
         {
           "x": 722.5,
-          "y": 736
+          "y": 1216
         }
       ],
       "animated": false,
@@ -825,11 +825,11 @@
       "route": [
         {
           "x": 1294.5,
-          "y": 427
+          "y": 587
         },
         {
           "x": 1294.5,
-          "y": 493
+          "y": 813
         }
       ],
       "animated": false,
@@ -864,11 +864,11 @@
       "route": [
         {
           "x": 1294.5,
-          "y": 630
+          "y": 950
         },
         {
           "x": 1294.5,
-          "y": 696
+          "y": 1176
         }
       ],
       "animated": false,

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;opacity:1.000000;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;opacity:1.000000;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="1654899612" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="332">
+]]></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="1654899612" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="332">
 <rect x="-100" y="-100" width="492" height="332" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[]]></style></svg>

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;opacity:1.000000;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;opacity:1.000000;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="124328945" maskUnits="userSpaceOnUse" x="-100" y="-100" width="452" height="332">
+]]></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="124328945" maskUnits="userSpaceOnUse" x="-100" y="-100" width="452" height="332">
 <rect x="-100" y="-100" width="452" height="332" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[]]></style></svg>

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

@@ -0,0 +1,212 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 426,
+      "height": 226,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 18,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "x.a",
+      "type": "",
+      "pos": {
+        "x": 50,
+        "y": 50
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "x.b",
+      "type": "",
+      "pos": {
+        "x": 263,
+        "y": 50
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [
+    {
+      "id": "x.(a -> a)[0]",
+      "src": "x.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "x.a",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 163,
+          "y": 73.37662337662337
+        },
+        {
+          "x": 189.66666666666669,
+          "y": 54.675324675324674
+        },
+        {
+          "x": 198,
+          "y": 50
+        },
+        {
+          "x": 200.5,
+          "y": 50
+        },
+        {
+          "x": 203,
+          "y": 50
+        },
+        {
+          "x": 206.33333333333331,
+          "y": 62.6
+        },
+        {
+          "x": 208.83333333333331,
+          "y": 81.5
+        },
+        {
+          "x": 211.33333333333334,
+          "y": 100.4
+        },
+        {
+          "x": 211.33333333333334,
+          "y": 125.6
+        },
+        {
+          "x": 208.83333333333331,
+          "y": 144.5
+        },
+        {
+          "x": 206.33333333333331,
+          "y": 163.4
+        },
+        {
+          "x": 189.66666666666669,
+          "y": 171.32467532467533
+        },
+        {
+          "x": 163,
+          "y": 152.62337662337663
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}

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

@@ -0,0 +1,175 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 446,
+      "height": 276,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 18,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "x.a",
+      "type": "",
+      "pos": {
+        "x": 137,
+        "y": 87
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "x.b",
+      "type": "",
+      "pos": {
+        "x": 270,
+        "y": 87
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [
+    {
+      "id": "x.(a -> a)[0]",
+      "src": "x.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "x.a",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 137,
+          "y": 129
+        },
+        {
+          "x": 87,
+          "y": 129
+        },
+        {
+          "x": 87,
+          "y": 171
+        },
+        {
+          "x": 137,
+          "y": 171
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}

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

@@ -796,12 +796,12 @@ width="1540" height="578" viewBox="-102 -102 1540 578"><style type="text/css">
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
   margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g id="queue"><g class="shape" ><path d="M 24 148 H 1312 C 1336 148 1336 249.7 1336 261 C 1336 272.3 1336 374 1312 374 H 24 C 0 374 0 272.3 0 261 C 0 249.7 0 148 24 148 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1312 148 C 1288 148 1288 249.7 1288 261 C 1288 272.3 1288 374 1312 374" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g></g><g id="m0_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="60.000000" y="12.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Oldest message</p>
+</style><g id="queue"><g class="shape" ><path d="M 24 148 H 1312 C 1336 148 1336 249.7 1336 261 C 1336 272.3 1336 374 1312 374 H 24 C 0 374 0 272.3 0 261 C 0 249.7 0 148 24 148 Z" style="fill:#DEE1EB;stroke:#0D32B2;stroke-width:2;"/><path d="M 1312 148 C 1288 148 1288 249.7 1288 261 C 1288 272.3 1288 374 1312 374" style="fill:#DEE1EB;stroke:#0D32B2;stroke-width:2;"/></g></g><g id="m0_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="60.000000" y="12.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Oldest message</p>
 </div></foreignObject></g></g><g id="m2_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="462.000000" y="12.000000" width="41" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Offset</p>
 </div></foreignObject></g></g><g id="m5_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="994.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="1154.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="50" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="235" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="297.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="420" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="482.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="605" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="667.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="790" y="198" width="126" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="853.000000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="976" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1038.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="1161" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1223.500000" y="264.000000" 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 112.500000 38.000000 C 112.500000 85.600000 112.500000 158.000000 112.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 482.500000 38.000000 C 482.500000 85.600000 482.500000 158.000000 482.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 1038.500000 38.000000 C 1038.500000 85.600000 1038.500000 158.000000 1038.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 1223.500000 50.000000 C 1223.500000 88.000000 1223.500000 158.000000 1223.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><mask id="1305977298" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1540" height="578">
+</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="50" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="235" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="297.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="420" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="482.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="605" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="667.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="790" y="198" width="126" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="853.000000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="976" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1038.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="1161" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1223.500000" y="264.000000" 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 112.500000 38.000000 C 112.500000 85.600000 112.500000 158.000000 112.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 482.500000 38.000000 C 482.500000 85.600000 482.500000 158.000000 482.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 1038.500000 38.000000 C 1038.500000 85.600000 1038.500000 158.000000 1038.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 1223.500000 50.000000 C 1223.500000 88.000000 1223.500000 158.000000 1223.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><mask id="1305977298" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1540" height="578">
 <rect x="-100" y="-100" width="1540" height="578" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -796,12 +796,12 @@ width="1350" height="633" viewBox="-90 -90 1350 633"><style type="text/css">
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
   margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g id="queue"><g class="shape" ><path d="M 36 165 H 1134 C 1158 165 1158 289.2 1158 303 C 1158 316.8 1158 441 1134 441 H 36 C 12 441 12 316.8 12 303 C 12 289.2 12 165 36 165 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1134 165 C 1110 165 1110 289.2 1110 303 C 1110 316.8 1110 441 1134 441" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g></g><g id="m0_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="96.000000" y="36.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Oldest message</p>
+</style><g id="queue"><g class="shape" ><path d="M 36 165 H 1134 C 1158 165 1158 289.2 1158 303 C 1158 316.8 1158 441 1134 441 H 36 C 12 441 12 316.8 12 303 C 12 289.2 12 165 36 165 Z" style="fill:#DEE1EB;stroke:#0D32B2;stroke-width:2;"/><path d="M 1134 165 C 1110 165 1110 289.2 1110 303 C 1110 316.8 1110 441 1134 441" style="fill:#DEE1EB;stroke:#0D32B2;stroke-width:2;"/></g></g><g id="m0_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="96.000000" y="36.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Oldest message</p>
 </div></foreignObject></g></g><g id="m2_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="419.000000" y="36.000000" width="41" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Offset</p>
 </div></foreignObject></g></g><g id="m5_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="830.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="950.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="87" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="149.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="232" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="377" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="522" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="584.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="667" y="240" width="126" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="730.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="813" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="875.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="958" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1020.500000" y="306.000000" 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 149.500000 62.000000 L 149.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 439.500000 62.000000 L 439.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 875.500000 62.000000 L 875.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 1020.500000 62.000000 L 1020.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><mask id="71928444" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1350" height="633">
+</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="87" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="149.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="232" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="377" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="522" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="584.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="667" y="240" width="126" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="730.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="813" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="875.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="958" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1020.500000" y="306.000000" 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 149.500000 62.000000 L 149.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 439.500000 62.000000 L 439.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 875.500000 62.000000 L 875.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 1020.500000 62.000000 L 1020.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><mask id="71928444" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1350" height="633">
 <rect x="-100" y="-100" width="1350" height="633" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="366" height="552" viewBox="-100 -100 366 552"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="A"><g class="shape" ><rect x="13" y="0" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="0" y="226" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="292.000000" 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 83.000000 127.000000 C 83.000000 166.000000 83.000000 186.000000 83.000000 223.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3774985050)"/></g><mask id="3774985050" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
+]]></script><g id="A"><g class="shape" ><rect x="13" y="0" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="0" y="226" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="292.000000" 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 83.000000 127.000000 C 83.000000 166.000000 83.000000 186.000000 83.000000 223.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3774985050)"/></g><mask id="3774985050" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
 <rect x="-100" y="-100" width="366" height="552" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="366" height="552" viewBox="-88 -88 366 552"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="A"><g class="shape" ><rect x="25" y="12" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="238" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="304.000000" 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 95.000000 139.000000 L 95.000000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1550694221)"/></g><mask id="1550694221" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
+]]></script><g id="A"><g class="shape" ><rect x="25" y="12" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="238" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="304.000000" 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 95.000000 139.000000 L 95.000000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1550694221)"/></g><mask id="1550694221" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
 <rect x="-100" y="-100" width="366" height="552" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -0,0 +1,223 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "md",
+      "type": "text",
+      "pos": {
+        "x": 9,
+        "y": 226
+      },
+      "width": 95,
+      "height": 115,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "\n# hey\n- they\n\t1. they\n",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 95,
+      "labelHeight": 115,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "a",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "b",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 441
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(a -> md)[0]",
+      "src": "a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "md",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 56.5,
+          "y": 126
+        },
+        {
+          "x": 56.5,
+          "y": 166
+        },
+        {
+          "x": 56.5,
+          "y": 186
+        },
+        {
+          "x": 56.5,
+          "y": 226
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(md -> b)[0]",
+      "src": "md",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 56.5,
+          "y": 341
+        },
+        {
+          "x": 56.5,
+          "y": 381
+        },
+        {
+          "x": 56.5,
+          "y": 401
+        },
+        {
+          "x": 56.5,
+          "y": 441
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}

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

@@ -0,0 +1,205 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "md",
+      "type": "text",
+      "pos": {
+        "x": 21,
+        "y": 238
+      },
+      "width": 95,
+      "height": 115,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "\n# hey\n- they\n\t1. they\n",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 95,
+      "labelHeight": 115,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "a",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "b",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 453
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(a -> md)[0]",
+      "src": "a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "md",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 68.5,
+          "y": 138
+        },
+        {
+          "x": 68.5,
+          "y": 238
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(md -> b)[0]",
+      "src": "md",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 68.5,
+          "y": 353
+        },
+        {
+          "x": 68.5,
+          "y": 453
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}

e2etests/testdata/regression/no-lexer/dagre/board.exp.json

@@ -0,0 +1,46 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "code",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 73,
+      "height": 38,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x -> y",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "d2",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 73,
+      "labelHeight": 38,
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/regression/no-lexer/elk/board.exp.json

@@ -0,0 +1,46 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "code",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 73,
+      "height": 38,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x -> y",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "d2",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 73,
+      "labelHeight": 38,
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}

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

@@ -39,9 +39,9 @@ width="1286" height="548" viewBox="-102 -102 1286 548"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="27.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="36.000000" x2="1082.000000" y2="36.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="341" y="136" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="136.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="163.000000" 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="341" y="272" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="272.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="299.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="351.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="27.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="36.000000" x2="1082.000000" y2="36.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="341" y="136" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="341.000000" y="136.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="163.000000" 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="341" y="272" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="341.000000" y="272.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="299.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="351.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
 <text class="text" x="392.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="722.000000" y="331.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="341.000000" y1="344.000000" x2="742.000000" y2="344.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 38.000000 C 541.000000 76.000000 541.000000 96.000000 541.000000 132.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 174.000000 C 541.000000 212.000000 541.000000 232.000000 541.000000 268.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><mask id="4293455829" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
+<text class="text" x="722.000000" y="331.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="341.000000" y1="344.000000" x2="742.000000" y2="344.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 38.000000 C 541.000000 76.000000 541.000000 96.000000 541.000000 132.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 174.000000 C 541.000000 212.000000 541.000000 232.000000 541.000000 268.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><mask id="4293455829" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
 <rect x="-100" y="-100" width="1286" height="548" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,9 +39,9 @@ width="1286" height="548" viewBox="-90 -90 1286 548"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="39.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="48.000000" x2="1094.000000" y2="48.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="352" y="148" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="148.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="175.000000" 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="352" y="284" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="284.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="311.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="362.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="39.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="48.000000" x2="1094.000000" y2="48.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="352" y="148" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="352.000000" y="148.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="175.000000" 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="352" y="284" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="352.000000" y="284.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="311.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="362.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
 <text class="text" x="403.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="733.000000" y="343.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="352.000000" y1="356.000000" x2="753.000000" y2="356.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 50.000000 L 553.000000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 186.000000 L 553.000000 280.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><mask id="2684059959" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
+<text class="text" x="733.000000" y="343.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="352.000000" y1="356.000000" x2="753.000000" y2="356.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 50.000000 L 553.000000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 186.000000 L 553.000000 280.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><mask id="2684059959" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
 <rect x="-100" y="-100" width="1286" height="548" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/regression/opacity-on-label/dagre/board.exp.json

@@ -0,0 +1,175 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "",
+      "pos": {
+        "x": 105,
+        "y": 0
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 0.4,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "y",
+      "type": "text",
+      "pos": {
+        "x": 278,
+        "y": 51
+      },
+      "width": 304,
+      "height": 24,
+      "opacity": 0.4,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "linux: because a PC is a terrible thing to waste",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 304,
+      "labelHeight": 24,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "a",
+      "type": "",
+      "pos": {
+        "x": 105,
+        "y": 263
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(x -> a)[0]",
+      "src": "x",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 0.4,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "You don't have to know how the computer works,\njust how to work the computer.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 322,
+      "labelHeight": 37,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 161,
+          "y": 126
+        },
+        {
+          "x": 161,
+          "y": 180.8
+        },
+        {
+          "x": 161,
+          "y": 208.3
+        },
+        {
+          "x": 161,
+          "y": 263.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}

e2etests/testdata/regression/opacity-on-label/elk/board.exp.json

@@ -0,0 +1,166 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "",
+      "pos": {
+        "x": 116,
+        "y": 12
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 0.4,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "y",
+      "type": "text",
+      "pos": {
+        "x": 249,
+        "y": 63
+      },
+      "width": 304,
+      "height": 24,
+      "opacity": 0.4,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "linux: because a PC is a terrible thing to waste",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 304,
+      "labelHeight": 24,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "a",
+      "type": "",
+      "pos": {
+        "x": 116,
+        "y": 375
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(x -> a)[0]",
+      "src": "x",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 0.4,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "You don't have to know how the computer works,\njust how to work the computer.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 322,
+      "labelHeight": 37,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 173,
+          "y": 138
+        },
+        {
+          "x": 173,
+          "y": 375
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}

e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg

@@ -39,7 +39,7 @@ width="1825" height="777" viewBox="-102 -102 1825 777"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="k8s"><g class="shape" ><rect x="0" y="0" width="1621" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="810.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0" y="347" width="555" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="277.500000" y="380.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="116" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="212.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="368" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="464.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="620" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="716.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="872" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="968.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="1125" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1221.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1378" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1474.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="171" y="397" width="136" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="239.000000" y="463.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="369" y="397" width="136" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="437.000000" y="463.000000" 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 99.000000 228.000000 C 99.000000 274.400000 99.000000 298.700000 99.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="99.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 201.000000 228.000000 C 201.000000 274.400000 201.000000 298.700000 201.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="201.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 297.000000 228.000000 C 297.000000 274.400000 297.000000 298.700000 297.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="297.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 378.000000 228.000000 C 378.000000 274.400000 378.000000 298.700000 378.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="378.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">vault</text></g><mask id="2025777275" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1825" height="777">
+]]></script><g id="k8s"><g class="shape" ><rect x="0" y="0" width="1621" height="226" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="810.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0" y="347" width="555" height="226" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="277.500000" y="380.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="116" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="212.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="368" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="464.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="620" y="50" width="192" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="716.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="872" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="968.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="1125" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1221.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1378" y="50" width="193" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="1474.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="171" y="397" width="136" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="239.000000" y="463.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="369" y="397" width="136" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="437.000000" y="463.000000" 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 99.000000 228.000000 C 99.000000 274.400000 99.000000 298.700000 99.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="99.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 201.000000 228.000000 C 201.000000 274.400000 201.000000 298.700000 201.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="201.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 297.000000 228.000000 C 297.000000 274.400000 297.000000 298.700000 297.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="297.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 378.000000 228.000000 C 378.000000 274.400000 378.000000 298.700000 378.000000 343.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2025777275)"/><text class="text-italic" x="378.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">vault</text></g><mask id="2025777275" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1825" height="777">
 <rect x="-100" y="-100" width="1825" height="777" fill="white"></rect>
 <rect x="70.000000" y="276.000000" width="59" height="21" fill="black"></rect>
 <rect x="169.000000" y="276.000000" width="65" height="21" fill="black"></rect>

e2etests/testdata/regression/overlapping-edge-label/elk/board.exp.json

@@ -287,7 +287,7 @@
       "type": "",
       "pos": {
         "x": 397,
-        "y": 519
+        "y": 559
       },
       "width": 442,
       "height": 276,
@@ -327,7 +327,7 @@
       "type": "",
       "pos": {
         "x": 472,
-        "y": 594
+        "y": 634
       },
       "width": 136,
       "height": 126,
@@ -367,7 +367,7 @@
       "type": "",
       "pos": {
         "x": 628,
-        "y": 594
+        "y": 634
       },
       "width": 136,
       "height": 126,
@@ -443,7 +443,7 @@
         },
         {
           "x": 485.6,
-          "y": 519
+          "y": 559
         }
       ],
       "animated": false,
@@ -482,7 +482,7 @@
         },
         {
           "x": 574,
-          "y": 519
+          "y": 559
         }
       ],
       "animated": false,
@@ -529,7 +529,7 @@
         },
         {
           "x": 662.4000000000001,
-          "y": 519
+          "y": 559
         }
       ],
       "animated": false,
@@ -568,15 +568,15 @@
         },
         {
           "x": 1136,
-          "y": 469
+          "y": 509
         },
         {
           "x": 750.8,
-          "y": 469
+          "y": 509
         },
         {
           "x": 750.8,
-          "y": 519
+          "y": 559
         }
       ],
       "animated": false,

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

@@ -39,7 +39,7 @@ width="394" height="356" viewBox="-102 -102 394 356"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="my network"><g class="shape" ><rect x="0" y="0" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="63.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="95.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="3050687478" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
+]]></script><g id="my network"><g class="shape" ><rect x="0" y="0" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="63.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="95.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="3050687478" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
 <rect x="-100" y="-100" width="394" height="356" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="394" height="356" viewBox="-90 -90 394 356"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="my network"><g class="shape" ><rect x="12" y="12" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="75.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="107.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="2671818094" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
+]]></script><g id="my network"><g class="shape" ><rect x="12" y="12" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="75.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="107.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="2671818094" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
 <rect x="-100" y="-100" width="394" height="356" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="648" height="1340" viewBox="-100 -100 648 1340"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="foo"><g class="shape" ><rect x="0" y="0" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="0" y="620" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="653.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="274" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="274" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="796.000000" 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 224.000000 521.000000 C 224.000000 560.000000 224.000000 580.000000 224.000000 617.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="(foo.a -- )[0]"><path d="M 99.000000 238.000000 L 99.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foo.b -- )[0]"><path d="M 349.000000 238.000000 L 349.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.c -- )[0]"><path d="M 99.000000 858.000000 L 99.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.d -- )[0]"><path d="M 349.000000 858.000000 L 349.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 101.000000 366.000000 L 345.000000 366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 101.000000 986.000000 L 345.000000 986.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><mask id="625948739" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
+]]></script><g id="foo"><g class="shape" ><rect x="0" y="0" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text" x="224.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="0" y="620" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text" x="224.000000" y="653.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="99.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="274" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="349.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="99.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="274" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="349.000000" y="796.000000" 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 224.000000 521.000000 C 224.000000 560.000000 224.000000 580.000000 224.000000 617.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="(foo.a -- )[0]"><path d="M 99.000000 238.000000 L 99.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foo.b -- )[0]"><path d="M 349.000000 238.000000 L 349.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.c -- )[0]"><path d="M 99.000000 858.000000 L 99.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.d -- )[0]"><path d="M 349.000000 858.000000 L 349.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 101.000000 366.000000 L 345.000000 366.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 101.000000 986.000000 L 345.000000 986.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><mask id="625948739" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
 <rect x="-100" y="-100" width="648" height="1340" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="648" height="1340" viewBox="-88 -88 648 1340"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="foo"><g class="shape" ><rect x="12" y="12" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.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="632" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="665.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="36" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="286" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="36" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="286" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="808.000000" 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 236.000000 533.000000 L 236.000000 629.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="(foo.a -- )[0]"><path d="M 111.000000 250.000000 L 111.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foo.b -- )[0]"><path d="M 361.000000 250.000000 L 361.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.c -- )[0]"><path d="M 111.000000 870.000000 L 111.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.d -- )[0]"><path d="M 361.000000 870.000000 L 361.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 113.000000 378.000000 L 357.000000 378.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 113.000000 998.000000 L 357.000000 998.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><mask id="3235423664" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
+]]></script><g id="foo"><g class="shape" ><rect x="12" y="12" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text" x="236.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="632" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:0;" /></g><text class="text" x="236.000000" y="665.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="36" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="286" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="361.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="36" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="111.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="286" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="361.000000" y="808.000000" 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 236.000000 533.000000 L 236.000000 629.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="(foo.a -- )[0]"><path d="M 111.000000 250.000000 L 111.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foo.b -- )[0]"><path d="M 361.000000 250.000000 L 361.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.c -- )[0]"><path d="M 111.000000 870.000000 L 111.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.d -- )[0]"><path d="M 361.000000 870.000000 L 361.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 113.000000 378.000000 L 357.000000 378.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 113.000000 998.000000 L 357.000000 998.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><mask id="3235423664" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
 <rect x="-100" y="-100" width="648" height="1340" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
+]]></script><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
 <rect x="-100" y="-100" width="604" height="458" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
+]]></script><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
 <rect x="-100" y="-100" width="604" height="458" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;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 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
+]]></script><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" 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 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
 <rect x="-100" y="-100" width="377" height="798" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;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 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
+]]></script><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" 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 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
 <rect x="-100" y="-100" width="377" height="798" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,11 +39,11 @@ width="1392" height="312" viewBox="-102 -102 1392 312"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+]]></script><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="272.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="514.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="534.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="272.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
-<text class="text" x="514.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="534.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="594" y="0" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="594.000000" y="0.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="614.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="604.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+<text class="text" x="514.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="534.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="594" y="0" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="594.000000" y="0.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="614.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="604.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <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>

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

@@ -39,11 +39,11 @@ width="1352" height="312" viewBox="-90 -90 1352 312"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+]]></script><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="284.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="526.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="546.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="284.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
-<text class="text" x="526.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="546.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="566" y="12" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="566.000000" y="12.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="586.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="576.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+<text class="text" x="526.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="546.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="566" y="12" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="566.000000" y="12.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="586.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="576.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <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>

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

@@ -39,7 +39,7 @@ width="626" height="1028" viewBox="-102 -102 626 1028"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <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="402.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>
@@ -51,7 +51,7 @@ width="626" height="1028" viewBox="-102 -102 626 1028"><style type="text/css">
 <text class="text-mono" x="30.000000" y="304.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">getJobs()</text>
 <text class="text-mono" x="402.000000" y="304.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">Job[]</text><text class="text-mono" x="10.000000" y="350.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
 <text class="text-mono" x="30.000000" y="350.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">setTimeout(seconds int)</text>
-<text class="text-mono" x="402.000000" y="350.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text></g></g><g id="users"><g class="shape" ><rect class="shape" x="107" y="468" width="208" height="186" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="107.000000" y="468.000000" width="208.000000" height="31.000000" fill="#0A0F25" /><text class="text" x="117.000000" y="519.500000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text-mono" x="402.000000" y="350.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text></g></g><g id="users"><g class="shape" ><rect class="shape" x="107" y="468" width="208" height="186" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="107.000000" y="468.000000" width="208.000000" height="31.000000" fill="#0A0F25" /><text class="text" x="117.000000" y="519.500000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="218.000000" y="519.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="295.000000" y="519.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="107.000000" y1="530.000000" x2="315.000000" y2="530.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="117.000000" y="550.500000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="218.000000" y="550.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
@@ -61,9 +61,9 @@ width="626" height="1028" viewBox="-102 -102 626 1028"><style type="text/css">
 <text class="text" x="218.000000" y="612.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
 <text class="text" x="295.000000" y="612.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="107.000000" y1="623.000000" x2="315.000000" y2="623.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="117.000000" y="643.500000" style="text-anchor:start;font-size:20px;fill:#0D32B2">last_login</text>
 <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)" style="opacity:1.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" font-weight="bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+<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" font-weight="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" font-weight="bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" font-weight="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" font-weight="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;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#523458208)"/></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;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#523458208)"/></g><mask id="523458208" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="1028">
+</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" font-weight="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(#523458208)"/></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(#523458208)"/></g><mask id="523458208" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="1028">
 <rect x="-100" y="-100" width="626" height="1028" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

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

@@ -39,7 +39,7 @@ width="626" height="1028" viewBox="-90 -90 626 1028"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <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="414.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>
@@ -51,7 +51,7 @@ width="626" height="1028" viewBox="-90 -90 626 1028"><style type="text/css">
 <text class="text-mono" x="42.000000" y="316.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">getJobs()</text>
 <text class="text-mono" x="414.000000" y="316.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">Job[]</text><text class="text-mono" x="22.000000" y="362.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
 <text class="text-mono" x="42.000000" y="362.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">setTimeout(seconds int)</text>
-<text class="text-mono" x="414.000000" y="362.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text></g></g><g id="users"><g class="shape" ><rect class="shape" x="119" y="480" width="208" height="186" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="119.000000" y="480.000000" width="208.000000" height="31.000000" fill="#0A0F25" /><text class="text" x="129.000000" y="531.500000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+<text class="text-mono" x="414.000000" y="362.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text></g></g><g id="users"><g class="shape" ><rect class="shape" x="119" y="480" width="208" height="186" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="119.000000" y="480.000000" width="208.000000" height="31.000000" fill="#0A0F25" /><text class="text" x="129.000000" y="531.500000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="230.000000" y="531.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="307.000000" y="531.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="119.000000" y1="542.000000" x2="327.000000" y2="542.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="129.000000" y="562.500000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="230.000000" y="562.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
@@ -61,9 +61,9 @@ width="626" height="1028" viewBox="-90 -90 626 1028"><style type="text/css">
 <text class="text" x="230.000000" y="624.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
 <text class="text" x="307.000000" y="624.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="119.000000" y1="635.000000" x2="327.000000" y2="635.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="129.000000" y="655.500000" style="text-anchor:start;font-size:20px;fill:#0D32B2">last_login</text>
 <text class="text" x="230.000000" y="655.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
-<text class="text" x="307.000000" y="655.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="119.000000" y1="666.000000" x2="327.000000" y2="666.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(125.000000 766.000000)" style="opacity:1.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" font-weight="bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+<text class="text" x="307.000000" y="655.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="119.000000" y1="666.000000" x2="327.000000" y2="666.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(125.000000 766.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" font-weight="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" font-weight="bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" font-weight="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" font-weight="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 476.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2661949018)"/></g><g id="(users -&gt; code)[0]"><path d="M 223.000000 668.000000 L 223.000000 762.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2661949018)"/></g><mask id="2661949018" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="1028">
+</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" font-weight="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 476.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2661949018)"/></g><g id="(users -&gt; code)[0]"><path d="M 223.000000 668.000000 L 223.000000 762.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2661949018)"/></g><mask id="2661949018" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="1028">
 <rect x="-100" y="-100" width="626" height="1028" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg

@@ -39,7 +39,7 @@ width="490" height="556" viewBox="-102 -102 490 556"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="87" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="173" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="292.000000" 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 93.558654 127.588117 C 64.154867 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><g id="(a -&gt; c)[0]"><path d="M 192.441346 127.588117 C 221.845133 166.000000 229.500000 186.000000 229.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><mask id="1704832080" maskUnits="userSpaceOnUse" x="-100" y="-100" width="490" height="556">
+]]></script><g id="a"><g class="shape" ><rect x="87" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="173" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="292.000000" 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 93.558654 127.588117 C 64.154867 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><g id="(a -&gt; c)[0]"><path d="M 192.441346 127.588117 C 221.845133 166.000000 229.500000 186.000000 229.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><mask id="1704832080" maskUnits="userSpaceOnUse" x="-100" y="-100" width="490" height="556">
 <rect x="-100" y="-100" width="490" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg

@@ -39,7 +39,7 @@ width="450" height="556" viewBox="-90 -90 450 556"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="30" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" 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 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><mask id="1488396738" maskUnits="userSpaceOnUse" x="-100" y="-100" width="450" height="556">
+]]></script><g id="a"><g class="shape" ><rect x="30" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" 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 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><mask id="1488396738" maskUnits="userSpaceOnUse" x="-100" y="-100" width="450" height="556">
 <rect x="-100" y="-100" width="450" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/sanity/basic/dagre/sketch.exp.svg

@@ -39,7 +39,7 @@ width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" 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 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2910090598)"/></g><mask id="2910090598" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
+]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" 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 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2910090598)"/></g><mask id="2910090598" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
 <rect x="-100" y="-100" width="317" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/sanity/basic/elk/sketch.exp.svg

@@ -39,7 +39,7 @@ width="317" height="556" viewBox="-90 -90 317 556"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" 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 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#26378777)"/></g><mask id="26378777" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" 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 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#26378777)"/></g><mask id="26378777" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
 <rect x="-100" y="-100" width="317" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg

@@ -39,7 +39,7 @@ width="418" height="756" viewBox="-102 -102 418 756"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="1" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="51" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="50" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.000000" y="442.000000" 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 107.000000 178.000000 C 107.000000 216.000000 107.000000 236.000000 107.000000 251.000000 C 107.000000 266.000000 107.000000 336.000000 107.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2635509857)"/></g><mask id="2635509857" maskUnits="userSpaceOnUse" x="-100" y="-100" width="418" height="756">
+]]></script><g id="a"><g class="shape" ><rect x="1" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="107.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="107.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="51" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="107.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="50" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="107.000000" y="442.000000" 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 107.000000 178.000000 C 107.000000 216.000000 107.000000 236.000000 107.000000 251.000000 C 107.000000 266.000000 107.000000 336.000000 107.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2635509857)"/></g><mask id="2635509857" maskUnits="userSpaceOnUse" x="-100" y="-100" width="418" height="756">
 <rect x="-100" y="-100" width="418" height="756" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg

@@ -39,7 +39,7 @@ width="468" height="866" viewBox="-90 -90 468 866"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="143.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="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" 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 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3058194229)"/></g><mask id="3058194229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="468" height="866">
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="143.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="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" 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 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3058194229)"/></g><mask id="3058194229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="468" height="866">
 <rect x="-100" y="-100" width="468" height="866" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg

@@ -39,7 +39,7 @@ width="317" height="577" viewBox="-102 -102 317 577"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="247" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="313.000000" 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 56.500000 128.000000 C 56.500000 174.400000 56.500000 198.700000 56.500000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2864276101)"/><text class="text-italic" x="56.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2864276101" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="577">
+]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="247" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="313.000000" 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 56.500000 128.000000 C 56.500000 174.400000 56.500000 198.700000 56.500000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2864276101)"/><text class="text-italic" x="56.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2864276101" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="577">
 <rect x="-100" y="-100" width="317" height="577" fill="white"></rect>
 <rect x="40.000000" y="176.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg

@@ -39,7 +39,7 @@ width="317" height="677" viewBox="-90 -90 317 677"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="425.000000" 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 68.500000 140.000000 L 68.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#501621412)"/><text class="text-italic" x="68.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="501621412" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="677">
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="425.000000" 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 68.500000 140.000000 L 68.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#501621412)"/><text class="text-italic" x="68.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="501621412" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="677">
 <rect x="-100" y="-100" width="317" height="677" fill="white"></rect>
 <rect x="52.000000" y="238.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/stable/animated/dagre/board.exp.json

@@ -0,0 +1,912 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "your love life will be",
+      "type": "",
+      "pos": {
+        "x": 58,
+        "y": 0
+      },
+      "width": 247,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "your love life will be",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 147,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "happy",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 247
+      },
+      "width": 149,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "happy",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 49,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "harmonious",
+      "type": "",
+      "pos": {
+        "x": 209,
+        "y": 247
+      },
+      "width": 190,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "harmonious",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 90,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "boredom",
+      "type": "",
+      "pos": {
+        "x": 471,
+        "y": 247
+      },
+      "width": 168,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "boredom",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 68,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "immortality",
+      "type": "",
+      "pos": {
+        "x": 460,
+        "y": 0
+      },
+      "width": 191,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "immortality",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 91,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Friday",
+      "type": "",
+      "pos": {
+        "x": 711,
+        "y": 0
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Friday",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 50,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Monday",
+      "type": "",
+      "pos": {
+        "x": 705,
+        "y": 247
+      },
+      "width": 161,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Monday",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 61,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Insomnia",
+      "type": "",
+      "pos": {
+        "x": 1126,
+        "y": 0
+      },
+      "width": 170,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Insomnia",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 70,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Sleep",
+      "type": "",
+      "pos": {
+        "x": 930,
+        "y": 247
+      },
+      "width": 145,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Sleep",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 45,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Wake",
+      "type": "",
+      "pos": {
+        "x": 1135,
+        "y": 247
+      },
+      "width": 144,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Wake",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 44,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Dream",
+      "type": "",
+      "pos": {
+        "x": 1339,
+        "y": 247
+      },
+      "width": 151,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Dream",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 51,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Listen",
+      "type": "",
+      "pos": {
+        "x": 1552,
+        "y": 0
+      },
+      "width": 148,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Listen",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 48,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Talk",
+      "type": "",
+      "pos": {
+        "x": 1558,
+        "y": 247
+      },
+      "width": 136,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Talk",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 36,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(your love life will be -> happy)[0]",
+      "src": "your love life will be",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "happy",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 126.917004048583,
+          "y": 126
+        },
+        {
+          "x": 84.9834008097166,
+          "y": 174.4
+        },
+        {
+          "x": 74.5,
+          "y": 198.7
+        },
+        {
+          "x": 74.5,
+          "y": 247.5
+        }
+      ],
+      "isCurve": true,
+      "animated": true,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(your love life will be -> harmonious)[0]",
+      "src": "your love life will be",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "harmonious",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 243.98987854251013,
+          "y": 126
+        },
+        {
+          "x": 291.99797570850205,
+          "y": 174.4
+        },
+        {
+          "x": 304,
+          "y": 198.7
+        },
+        {
+          "x": 304,
+          "y": 247.5
+        }
+      ],
+      "isCurve": true,
+      "animated": true,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(boredom <- immortality)[0]",
+      "src": "boredom",
+      "srcArrow": "triangle",
+      "srcLabel": "",
+      "dst": "immortality",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 555.25,
+          "y": 247
+        },
+        {
+          "x": 555.25,
+          "y": 198.6
+        },
+        {
+          "x": 555.25,
+          "y": 174.3
+        },
+        {
+          "x": 555.25,
+          "y": 125.5
+        }
+      ],
+      "isCurve": true,
+      "animated": true,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(Friday <-> Monday)[0]",
+      "src": "Friday",
+      "srcArrow": "triangle",
+      "srcLabel": "",
+      "dst": "Monday",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 785.75,
+          "y": 126
+        },
+        {
+          "x": 785.75,
+          "y": 174.4
+        },
+        {
+          "x": 785.75,
+          "y": 198.7
+        },
+        {
+          "x": 785.75,
+          "y": 247.5
+        }
+      ],
+      "isCurve": true,
+      "animated": true,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(Insomnia -- Sleep)[0]",
+      "src": "Insomnia",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "Sleep",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 1126,
+          "y": 113.2874251497006
+        },
+        {
+          "x": 1027,
+          "y": 171.8574850299401
+        },
+        {
+          "x": 1002.25,
+          "y": 198.7
+        },
+        {
+          "x": 1002.25,
+          "y": 247.5
+        }
+      ],
+      "isCurve": true,
+      "animated": true,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(Insomnia -- Wake)[0]",
+      "src": "Insomnia",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "Wake",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 1208.831983805668,
+          "y": 126
+        },
+        {
+          "x": 1207.1663967611337,
+          "y": 174.4
+        },
+        {
+          "x": 1206.75,
+          "y": 198.7
+        },
+        {
+          "x": 1206.75,
+          "y": 247.5
+        }
+      ],
+      "isCurve": true,
+      "animated": true,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(Insomnia -- Dream)[0]",
+      "src": "Insomnia",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "Dream",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 8,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 1296,
+          "y": 114.64821648216483
+        },
+        {
+          "x": 1390.6,
+          "y": 172.12964329643296
+        },
+        {
+          "x": 1414.25,
+          "y": 198.7
+        },
+        {
+          "x": 1414.25,
+          "y": 247.5
+        }
+      ],
+      "isCurve": true,
+      "animated": true,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(Listen <-> Talk)[0]",
+      "src": "Listen",
+      "srcArrow": "cf-one",
+      "srcLabel": "",
+      "dst": "Talk",
+      "dstArrow": "diamond",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "hear",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 32,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 1625.5,
+          "y": 126
+        },
+        {
+          "x": 1625.5,
+          "y": 174.4
+        },
+        {
+          "x": 1625.5,
+          "y": 198.7
+        },
+        {
+          "x": 1625.5,
+          "y": 247.5
+        }
+      ],
+      "isCurve": true,
+      "animated": true,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}