Merge branch 'master' into sequence-diagram-self-edges

ci/release/changelogs/next.md

@@ -25,6 +25,8 @@
 
 - Local images can now be included, e.g. `icon: ./my_img.png`.
   [#146](https://github.com/terrastruct/d2/issues/146)
+- Connection labels no longer overlap other connections.
+  [#332](https://github.com/terrastruct/d2/pull/332)
 - ELK layout engine now defaults to top-down to be consistent with dagre.
   [#251](https://github.com/terrastruct/d2/pull/251)
 - [install.sh](./install.sh) prints the dry run message more visibly.
@@ -46,6 +48,8 @@
   [#214](https://github.com/terrastruct/d2/pull/214)
 - Fixes images not loading in PNG exports.
   [#224](https://github.com/terrastruct/d2/pull/224)
+- Fixes label and icon overlapping each other in dagre and elk layouts.
+  [#343](https://github.com/terrastruct/d2/pull/343)
 - Avoid logging benign file watching errors.
   [#293](https://github.com/terrastruct/d2/pull/293)
 - `$BROWSER` now works to open a custom browser correctly.

ci/release/template/scripts/lib.sh

@@ -24,11 +24,10 @@ pick() {
 
   seed_file="$(mktemp)"
   echo "$seed" >"$seed_file"
-  # We add 16 more bytes to the seed file for sufficient entropy. Otherwise Cygwin's sort
+  # We add 16 more bytes to the seed file for sufficient entropy. Otherwise both Cygwin's
-  # for example complains and I'm sure there are more platforms that would too.
+  # and MinGW's sort for example complains about the lack of entropy on stderr and writes
-  # edit: nvm disabled for now, we don't use Cygwin anyway, we use MinGW who has a sort
+  # nothing to stdout. I'm sure there are more platforms that would too.
-  # that behaves correctly.
+  echo "================" >"$seed_file"
-  # echo "================" >"$seed_file"
 
   while [ $# -gt 0 ]; do
     echo "$1"

cmd/d2plugin-dagre/main.go

@@ -1,4 +1,4 @@
-//go:build cgo && !nodagre
+//go:build !nodagre
 
 package main
 

d2compiler/compile.go

@@ -252,11 +252,8 @@ func (c *compiler) compileKey(obj *d2graph.Object, m *d2ast.Map, mk *d2ast.Key)
 		c.errorf(mk.Range.Start, mk.Range.End, err.Error())
 		return
 	}
-	if resolvedObj != obj {
-		obj = resolvedObj
-	}
 
-	parent := obj
+	parent := resolvedObj
 	if len(resolvedIDA) > 0 {
 		unresolvedObj := obj
 		obj = parent.EnsureChild(resolvedIDA)

d2compiler/compile_test.go

@@ -6,6 +6,7 @@ import (
 	"strings"
 	"testing"
 
+	tassert "github.com/stretchr/testify/assert"
 	"oss.terrastruct.com/util-go/assert"
 	"oss.terrastruct.com/util-go/diff"
 
@@ -209,6 +210,20 @@ x: {
 
 			},
 		},
+		{
+			name: "underscore_unresolved_obj",
+
+			text: `
+x: {
+	_.y
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				tassert.Equal(t, "y", g.Objects[1].ID)
+				tassert.Equal(t, g.Root.AbsID(), g.Objects[1].References[0].ScopeObj.AbsID())
+				tassert.Equal(t, g.Objects[0].AbsID(), g.Objects[1].References[0].UnresolvedScopeObj.AbsID())
+			},
+		},
 		{
 			name: "underscore_parent_not_root",
 
@@ -1520,6 +1535,18 @@ dst.id <-> src.dst_id
 				assert.String(t, "sequence_diagram", g.Root.Attributes.Shape.Value)
 			},
 		},
+		{
+			name: "leaky_sequence",
+
+			text: `x: {
+  shape: sequence_diagram
+	a
+}
+b -> x.a
+`,
+			expErr: `d2/testdata/d2compiler/TestCompile/leaky_sequence.d2:5:1: connections within sequence diagrams can connect only to other objects within the same sequence diagram
+`,
+		},
 		{
 			name: "root_direction",
 

d2graph/d2graph.go

@@ -711,6 +711,16 @@ func (e *Edge) AbsID() string {
 	return fmt.Sprintf("%s(%s %s %s)[%d]", commonKey, strings.Join(srcIDA, "."), e.ArrowString(), strings.Join(dstIDA, "."), e.Index)
 }
 
+func (obj *Object) outerSequenceDiagram() *Object {
+	for obj != nil {
+		obj = obj.Parent
+		if obj.IsSequenceDiagram() {
+			return obj
+		}
+	}
+	return nil
+}
+
 func (obj *Object) Connect(srcID, dstID []string, srcArrow, dstArrow bool, label string) (*Edge, error) {
 	srcObj, srcID, err := ResolveUnderscoreKey(srcID, obj)
 	if err != nil {
@@ -732,6 +742,10 @@ func (obj *Object) Connect(srcID, dstID []string, srcArrow, dstArrow bool, label
 	src := srcObj.EnsureChild(srcID)
 	dst := dstObj.EnsureChild(dstID)
 
+	if src.outerSequenceDiagram() != dst.outerSequenceDiagram() {
+		return nil, errors.New("connections within sequence diagrams can connect only to other objects within the same sequence diagram")
+	}
+
 	edge := &Edge{
 		Attributes: Attributes{
 			Label: Scalar{

d2layouts/d2dagrelayout/layout.go

@@ -9,7 +9,7 @@ import (
 	"strings"
 
 	"cdr.dev/slog"
-	v8 "rogchap.com/v8go"
+	"github.com/dop251/goja"
 
 	"oss.terrastruct.com/util-go/xdefer"
 
@@ -54,11 +54,11 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 	defer xdefer.Errorf(&err, "failed to dagre layout")
 
 	debugJS := false
-	v8ctx := v8.NewContext()
+	vm := goja.New()
-	if _, err := v8ctx.RunScript(dagreJS, "dagre.js"); err != nil {
+	if _, err := vm.RunString(dagreJS); err != nil {
 		return err
 	}
-	if _, err := v8ctx.RunScript(setupJS, "setup.js"); err != nil {
+	if _, err := vm.RunString(setupJS); err != nil {
 		return err
 	}
 
@@ -80,7 +80,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 		rootAttrs.rankdir = "TB"
 	}
 	configJS := setGraphAttrs(rootAttrs)
-	if _, err := v8ctx.RunScript(configJS, "config.js"); err != nil {
+	if _, err := vm.RunString(configJS); err != nil {
 		return err
 	}
 
@@ -116,11 +116,11 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 		log.Debug(ctx, "script", slog.F("all", setupJS+configJS+loadScript))
 	}
 
-	if _, err := v8ctx.RunScript(loadScript, "load.js"); err != nil {
+	if _, err := vm.RunString(loadScript); err != nil {
 		return err
 	}
 
-	if _, err := v8ctx.RunScript(`dagre.layout(g)`, "layout.js"); err != nil {
+	if _, err := vm.RunString(`dagre.layout(g)`); err != nil {
 		if debugJS {
 			log.Warn(ctx, "layout error", slog.F("err", err))
 		}
@@ -128,7 +128,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 	}
 
 	for i := range g.Objects {
-		val, err := v8ctx.RunScript(fmt.Sprintf("JSON.stringify(g.node(g.nodes()[%d]))", i), "value.js")
+		val, err := vm.RunString(fmt.Sprintf("JSON.stringify(g.node(g.nodes()[%d]))", i))
 		if err != nil {
 			return err
 		}
@@ -150,7 +150,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 		if obj.LabelWidth != nil && obj.LabelHeight != nil {
 			if len(obj.ChildrenArray) > 0 {
 				obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
-			} else if obj.Attributes.Shape.Value == d2target.ShapeImage {
+			} else if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
 				obj.LabelPosition = go2.Pointer(string(label.OutsideTopCenter))
 			} else {
 				obj.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))
@@ -162,7 +162,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 	}
 
 	for i, edge := range g.Edges {
-		val, err := v8ctx.RunScript(fmt.Sprintf("JSON.stringify(g.edge(g.edges()[%d]))", i), "value.js")
+		val, err := vm.RunString(fmt.Sprintf("JSON.stringify(g.edge(g.edges()[%d]))", i))
 		if err != nil {
 			return err
 		}

d2layouts/d2elklayout/layout.go

@@ -11,8 +11,7 @@ import (
 	"fmt"
 	"math"
 
-	"rogchap.com/v8go"
+	"github.com/dop251/goja"
-
 	"oss.terrastruct.com/util-go/xdefer"
 
 	"oss.terrastruct.com/util-go/go2"
@@ -88,30 +87,17 @@ type ELKLayoutOptions struct {
 func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 	defer xdefer.Errorf(&err, "failed to ELK layout")
 
-	iso := v8go.NewIsolate()
+	vm := goja.New()
-	global := v8go.NewObjectTemplate(iso)
 
-	// setTimeout is not defined by in v8go global
+	console := vm.NewObject()
-	// As far as I can tell, it's not actually useful in elk.js
+	if err := vm.Set("console", console); err != nil {
-	// The comment above one of the instances it's used is "why do we even need this"
-	// and it's a timeout of 0.
-	// If weird things happen though, look here.
-	setTimeout := v8go.NewFunctionTemplate(iso, func(info *v8go.FunctionCallbackInfo) *v8go.Value {
-		args := info.Args()
-		fn, _ := args[0].AsFunction()
-		receiver := v8go.NewObjectTemplate(iso)
-		s, _ := receiver.NewInstance(info.Context())
-		fn.Call(s)
-
-		return s.Value
-	})
-	global.Set("setTimeout", setTimeout, v8go.ReadOnly)
-
-	v8ctx := v8go.NewContext(iso, global)
-	if _, err := v8ctx.RunScript(elkJS, "elk.js"); err != nil {
 		return err
 	}
-	if _, err := v8ctx.RunScript(setupJS, "setup.js"); err != nil {
+
+	if _, err := vm.RunString(elkJS); err != nil {
+		return err
+	}
+	if _, err := vm.RunString(setupJS); err != nil {
 		return err
 	}
 
@@ -205,37 +191,41 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 
 	loadScript := fmt.Sprintf(`var graph = %s`, raw)
 
-	if _, err := v8ctx.RunScript(loadScript, "load.js"); err != nil {
+	if _, err := vm.RunString(loadScript); err != nil {
 		return err
 	}
 
-	val, err := v8ctx.RunScript(`elk.layout(graph)
+	val, err := vm.RunString(`elk.layout(graph)
 .then(s => s)
 .catch(s => s)
-`, "layout.js")
+`)
 
 	if err != nil {
 		return err
 	}
 
-	promise, err := val.AsPromise()
+	p := val.Export()
 	if err != nil {
 		return err
 	}
 
-	for promise.State() == v8go.Pending {
+	promise := p.(*goja.Promise)
+
+	for promise.State() == goja.PromiseStatePending {
 		if err := ctx.Err(); err != nil {
 			return err
 		}
 		continue
 	}
 
-	jsonOut, err := promise.Result().MarshalJSON()
+	jsonOut := promise.Result().Export().(map[string]interface{})
+
+	jsonBytes, err := json.Marshal(jsonOut)
 	if err != nil {
 		return err
 	}
 
-	err = json.Unmarshal(jsonOut, &elkGraph)
+	err = json.Unmarshal(jsonBytes, &elkGraph)
 	if err != nil {
 		return err
 	}
@@ -257,7 +247,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 		if obj.LabelWidth != nil && obj.LabelHeight != nil {
 			if len(obj.ChildrenArray) > 0 {
 				obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
-			} else if obj.Attributes.Shape.Value == d2target.ShapeImage {
+			} else if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
 				obj.LabelPosition = go2.Pointer(string(label.OutsideTopCenter))
 			} else {
 				obj.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))

d2layouts/d2elklayout/setup.js

@@ -1 +1,2 @@
+var setTimeout = function(f) {f()};
 const elk = new ELK();

d2layouts/d2sequence/constants.go

@@ -26,7 +26,7 @@ const SPAN_MESSAGE_PAD = 16.
 
 const LIFELINE_STROKE_WIDTH int = 2
 
-const LIFELINE_STROKE_DASH int = 8
+const LIFELINE_STROKE_DASH int = 6
 
 // pad when the actor has the label placed OutsideMiddleBottom so that the lifeline is not so close to the text
 const LIFELINE_LABEL_PAD = 5.

d2layouts/d2sequence/layout.go

@@ -53,6 +53,9 @@ func Layout(ctx context.Context, g *d2graph.Graph, layout func(ctx context.Conte
 		for _, obj := range sd.actors {
 			objectsToRemove[obj] = struct{}{}
 		}
+		for _, obj := range sd.notes {
+			objectsToRemove[obj] = struct{}{}
+		}
 		for _, obj := range sd.spans {
 			objectsToRemove[obj] = struct{}{}
 		}
@@ -147,6 +150,7 @@ func cleanup(g *d2graph.Graph, sequenceDiagrams map[string]*sequenceDiagram, obj
 		g.Edges = append(g.Edges, sequenceDiagrams[obj.AbsID()].messages...)
 		g.Edges = append(g.Edges, sequenceDiagrams[obj.AbsID()].lifelines...)
 		g.Objects = append(g.Objects, sequenceDiagrams[obj.AbsID()].actors...)
+		g.Objects = append(g.Objects, sequenceDiagrams[obj.AbsID()].notes...)
 		g.Objects = append(g.Objects, sequenceDiagrams[obj.AbsID()].spans...)
 	}
 

d2layouts/d2sequence/layout_test.go

@@ -1,10 +1,14 @@
-package d2sequence
+package d2sequence_test
 
 import (
 	"context"
+	"strings"
 	"testing"
 
+	"github.com/stretchr/testify/assert"
+	"oss.terrastruct.com/d2/d2compiler"
 	"oss.terrastruct.com/d2/d2graph"
+	"oss.terrastruct.com/d2/d2layouts/d2sequence"
 	"oss.terrastruct.com/d2/d2target"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
@@ -25,45 +29,28 @@ func TestBasicSequenceDiagram(t *testing.T) {
 	//      │                       │
 	//      ◄───────────────────────┤
 	//      │                       │
-	g := d2graph.NewGraph(nil)
+	input := `
-	g.Root.Attributes.Shape = d2graph.Scalar{Value: d2target.ShapeSequenceDiagram}
+shape: sequence_diagram
-	n1 := g.Root.EnsureChild([]string{"n1"})
+n1 -> n2: left to right
+n2 -> n1: right to left
+n1 -> n2
+n2 -> n1
+`
+	g, err := d2compiler.Compile("", strings.NewReader(input), nil)
+	assert.Nil(t, err)
+
+	n1, has := g.Root.HasChild([]string{"n1"})
+	assert.True(t, has)
+	n2, has := g.Root.HasChild([]string{"n2"})
+	assert.True(t, has)
+
 	n1.Box = geo.NewBox(nil, 100, 100)
-	n2 := g.Root.EnsureChild([]string{"n2"})
 	n2.Box = geo.NewBox(nil, 30, 30)
 
-	g.Edges = []*d2graph.Edge{
-		{
-			Src:   n1,
-			Dst:   n2,
-			Index: 0,
-			Attributes: d2graph.Attributes{
-				Label: d2graph.Scalar{Value: "left to right"},
-			},
-		},
-		{
-			Src:   n2,
-			Dst:   n1,
-			Index: 0,
-			Attributes: d2graph.Attributes{
-				Label: d2graph.Scalar{Value: "right to left"},
-			},
-		},
-		{
-			Src:   n1,
-			Dst:   n2,
-			Index: 1,
-		},
-		{
-			Src:   n2,
-			Dst:   n1,
-			Index: 1,
-		},
-	}
 	nEdges := len(g.Edges)
 
 	ctx := log.WithTB(context.Background(), t, nil)
-	Layout(ctx, g, func(ctx context.Context, g *d2graph.Graph) error {
+	d2sequence.Layout(ctx, g, func(ctx context.Context, g *d2graph.Graph) error {
 		// just set some position as if it had been properly placed
 		for _, obj := range g.Objects {
 			obj.TopLeft = geo.NewPoint(0, 0)
@@ -153,12 +140,12 @@ func TestBasicSequenceDiagram(t *testing.T) {
 	}
 
 	// check label positions
-	if *g.Edges[0].LabelPosition != string(label.OutsideTopCenter) {
+	if *g.Edges[0].LabelPosition != string(label.InsideMiddleCenter) {
-		t.Fatalf("expected edge label to be placed on %s, got %s", string(label.OutsideTopCenter), *g.Edges[0].LabelPosition)
+		t.Fatalf("expected edge label to be placed on %s, got %s", string(label.InsideMiddleCenter), *g.Edges[0].LabelPosition)
 	}
 
-	if *g.Edges[1].LabelPosition != string(label.OutsideBottomCenter) {
+	if *g.Edges[1].LabelPosition != string(label.InsideMiddleCenter) {
-		t.Fatalf("expected edge label to be placed on %s, got %s", string(label.OutsideBottomCenter), *g.Edges[0].LabelPosition)
+		t.Fatalf("expected edge label to be placed on %s, got %s", string(label.InsideMiddleCenter), *g.Edges[0].LabelPosition)
 	}
 }
 
@@ -172,48 +159,51 @@ func TestSpansSequenceDiagram(t *testing.T) {
 	//      ├┐──────────────────────►
 	//   t2 ││                      │
 	//      ├┘◄─────────────────────┤
-	g := d2graph.NewGraph(nil)
-	g.Root.Attributes.Shape = d2graph.Scalar{Value: d2target.ShapeSequenceDiagram}
-	a := g.Root.EnsureChild([]string{"a"})
-	a.Box = geo.NewBox(nil, 100, 100)
-	a.Attributes = d2graph.Attributes{
-		Shape: d2graph.Scalar{Value: shape.PERSON_TYPE},
-	}
-	a_t1 := a.EnsureChild([]string{"t1"})
-	a_t1.Box = geo.NewBox(nil, 100, 100)
-	a_t1.Attributes = d2graph.Attributes{
-		Shape: d2graph.Scalar{Value: shape.DIAMOND_TYPE},
-		Label: d2graph.Scalar{Value: "label"},
-	}
-	a_t2 := a.EnsureChild([]string{"t2"})
-	a_t2.Box = geo.NewBox(nil, 100, 100)
-	b := g.Root.EnsureChild([]string{"b"})
-	b.Box = geo.NewBox(nil, 30, 30)
-	b_t1 := b.EnsureChild([]string{"t1"})
-	b_t1.Box = geo.NewBox(nil, 100, 100)
 
-	g.Edges = []*d2graph.Edge{
+	input := `
-		{
+shape: sequence_diagram
-			Src:   a_t1,
+a: { shape: person }
-			Dst:   b_t1,
+b
-			Index: 0,
+
-		}, {
+a.t1: {
-			Src:   b_t1,
+  shape: diamond
-			Dst:   a_t1,
+  label: label
-			Index: 0,
+}
-		}, {
+a.t1 -> b.t1
-			Src:   a_t2,
+b.t1 -> a.t1
-			Dst:   b,
+
-			Index: 0,
+a.t2 -> b
-		}, {
+b -> a.t2`
-			Src:   b,
-			Dst:   a_t2,
-			Index: 0,
-		},
-	}
 
 	ctx := log.WithTB(context.Background(), t, nil)
-	Layout(ctx, g, func(ctx context.Context, g *d2graph.Graph) error {
+	g, err := d2compiler.Compile("", strings.NewReader(input), nil)
+	assert.Nil(t, err)
+
+	g.Root.Attributes.Shape = d2graph.Scalar{Value: d2target.ShapeSequenceDiagram}
+
+	a, has := g.Root.HasChild([]string{"a"})
+	assert.True(t, has)
+
+	a_t1, has := a.HasChild([]string{"t1"})
+	assert.True(t, has)
+
+	a_t2, has := a.HasChild([]string{"t2"})
+	assert.True(t, has)
+
+	b, has := g.Root.HasChild([]string{"b"})
+	assert.True(t, has)
+	b.Box = geo.NewBox(nil, 30, 30)
+
+	b_t1, has := b.HasChild([]string{"t1"})
+	assert.True(t, has)
+
+	a.Box = geo.NewBox(nil, 100, 100)
+	a_t1.Box = geo.NewBox(nil, 100, 100)
+	a_t2.Box = geo.NewBox(nil, 100, 100)
+	b.Box = geo.NewBox(nil, 30, 30)
+	b_t1.Box = geo.NewBox(nil, 100, 100)
+
+	d2sequence.Layout(ctx, g, func(ctx context.Context, g *d2graph.Graph) error {
 		// just set some position as if it had been properly placed
 		for _, obj := range g.Objects {
 			obj.TopLeft = geo.NewPoint(0, 0)
@@ -226,9 +216,7 @@ func TestSpansSequenceDiagram(t *testing.T) {
 	})
 
 	// check properties
-	if a.Attributes.Shape.Value != shape.PERSON_TYPE {
+	assert.Equal(t, strings.ToLower(shape.PERSON_TYPE), strings.ToLower(a.Attributes.Shape.Value))
-		t.Fatal("actor a shape changed")
-	}
 
 	if a_t1.Attributes.Label.Value != "" {
 		t.Fatalf("expected no label for span, got %s", a_t1.Attributes.Label.Value)
@@ -249,13 +237,13 @@ func TestSpansSequenceDiagram(t *testing.T) {
 	}
 
 	// Y diff of the 2 first edges
-	expectedHeight := g.Edges[1].Route[0].Y - g.Edges[0].Route[0].Y + (2 * SPAN_MESSAGE_PAD)
+	expectedHeight := g.Edges[1].Route[0].Y - g.Edges[0].Route[0].Y + (2 * d2sequence.SPAN_MESSAGE_PAD)
 	if a_t1.Height != expectedHeight {
 		t.Fatalf("expected a.t1 height to be %.5f, got %.5f", expectedHeight, a_t1.Height)
 	}
 
-	if a_t1.Width != SPAN_BASE_WIDTH {
+	if a_t1.Width != d2sequence.SPAN_BASE_WIDTH {
-		t.Fatalf("expected span width to be %.5f, got %.5f", SPAN_BASE_WIDTH, a_t1.Width)
+		t.Fatalf("expected span width to be %.5f, got %.5f", d2sequence.SPAN_BASE_WIDTH, a_t1.Width)
 	}
 
 	// check positions
@@ -271,7 +259,7 @@ func TestSpansSequenceDiagram(t *testing.T) {
 	if a_t1.TopLeft.Y != b_t1.TopLeft.Y {
 		t.Fatal("expected a.t1 and b.t1 to be placed at the same Y")
 	}
-	if a_t1.TopLeft.Y+SPAN_MESSAGE_PAD != g.Edges[0].Route[0].Y {
+	if a_t1.TopLeft.Y+d2sequence.SPAN_MESSAGE_PAD != g.Edges[0].Route[0].Y {
 		t.Fatal("expected a.t1 to be placed at the same Y of the first message")
 	}
 
@@ -298,38 +286,44 @@ func TestNestedSequenceDiagrams(t *testing.T) {
 	// |     t1 ││                     ││ t1    |
 	// |        ├┘◄──────sdEdge2───────└┤       |
 	// └────────────────────────────────────────┘
-	g := d2graph.NewGraph(nil)
+	input := `container: {
-	container := g.Root.EnsureChild([]string{"container"})
+  shape: sequence_diagram
-	container.Attributes.Shape = d2graph.Scalar{Value: d2target.ShapeSequenceDiagram}
+  a: { shape: person }
+  b
+  a.t1 -> b.t1: sequence diagram edge 1
+  b.t1 -> a.t1: sequence diagram edge 2
+}
+c
+container -> c: edge 1
+`
+	ctx := log.WithTB(context.Background(), t, nil)
+	g, err := d2compiler.Compile("", strings.NewReader(input), nil)
+	assert.Nil(t, err)
+
+	container, has := g.Root.HasChild([]string{"container"})
+	assert.True(t, has)
 	container.Box = geo.NewBox(nil, 500, 500)
-	a := container.EnsureChild([]string{"a"})
+
+	a, has := container.HasChild([]string{"a"})
+	assert.True(t, has)
 	a.Box = geo.NewBox(nil, 100, 100)
-	a.Attributes.Shape = d2graph.Scalar{Value: shape.PERSON_TYPE}
+
-	a_t1 := a.EnsureChild([]string{"t1"})
+	a_t1, has := a.HasChild([]string{"t1"})
+	assert.True(t, has)
 	a_t1.Box = geo.NewBox(nil, 100, 100)
-	b := container.EnsureChild([]string{"b"})
+
+	b, has := container.HasChild([]string{"b"})
+	assert.True(t, has)
 	b.Box = geo.NewBox(nil, 30, 30)
-	b_t1 := b.EnsureChild([]string{"t1"})
+
+	b_t1, has := b.HasChild([]string{"t1"})
+	assert.True(t, has)
 	b_t1.Box = geo.NewBox(nil, 100, 100)
 
 	c := g.Root.EnsureChild([]string{"c"})
 	c.Box = geo.NewBox(nil, 100, 100)
 	c.Attributes.Shape = d2graph.Scalar{Value: d2target.ShapeSquare}
 
-	sdEdge1, err := g.Root.Connect(a_t1.AbsIDArray(), b_t1.AbsIDArray(), false, true, "sequence diagram edge 1")
-	if err != nil {
-		t.Fatal(err)
-	}
-	sdEdge2, err := g.Root.Connect(b_t1.AbsIDArray(), a_t1.AbsIDArray(), false, true, "sequence diagram edge 2")
-	if err != nil {
-		t.Fatal(err)
-	}
-
-	edge1, err := g.Root.Connect(container.AbsIDArray(), c.AbsIDArray(), false, false, "edge 1")
-	if err != nil {
-		t.Fatal(err)
-	}
-
 	layoutFn := func(ctx context.Context, g *d2graph.Graph) error {
 		if len(g.Objects) != 2 {
 			t.Fatal("expected only diagram objects for layout")
@@ -347,14 +341,7 @@ func TestNestedSequenceDiagrams(t *testing.T) {
 			t.Fatal("container children mismatch")
 		}
 
-		for _, edge := range g.Edges {
+		assert.Equal(t, 1, len(g.Edges))
-			if edge == sdEdge1 || edge == sdEdge2 {
-				t.Fatal("expected to have removed all sequence diagram edges from graph")
-			}
-		}
-		if g.Edges[0] != edge1 {
-			t.Fatal("expected graph edge to be in the graph")
-		}
 
 		// just set some position as if it had been properly placed
 		for _, obj := range g.Objects {
@@ -368,8 +355,7 @@ func TestNestedSequenceDiagrams(t *testing.T) {
 		return nil
 	}
 
-	ctx := log.WithTB(context.Background(), t, nil)
+	if err = d2sequence.Layout(ctx, g, layoutFn); err != nil {
-	if err = Layout(ctx, g, layoutFn); err != nil {
 		t.Fatal(err)
 	}
 

d2layouts/d2sequence/sequence_diagram.go

@@ -20,7 +20,9 @@ type sequenceDiagram struct {
 	messages  []*d2graph.Edge
 	lifelines []*d2graph.Edge
 	actors    []*d2graph.Object
+	groups    []*d2graph.Object
 	spans     []*d2graph.Object
+	notes     []*d2graph.Object
 
 	// can be either actors or spans
 	// rank: left to right position of actors/spans (spans have the same rank as their parents)
@@ -30,23 +32,117 @@ type sequenceDiagram struct {
 	firstMessage map[*d2graph.Object]*d2graph.Edge
 	lastMessage  map[*d2graph.Object]*d2graph.Edge
 
-	messageYStep   float64
+	yStep          float64
 	actorXStep     float64
 	maxActorHeight float64
+
+	verticalIndices map[string]int
 }
 
-func newSequenceDiagram(actors []*d2graph.Object, messages []*d2graph.Edge) *sequenceDiagram {
+func getObjEarliestLineNum(o *d2graph.Object) int {
+	min := int(math.MaxInt64)
+	for _, ref := range o.References {
+		if ref.MapKey == nil {
+			continue
+		}
+		min = go2.IntMin(min, ref.MapKey.Range.Start.Line)
+	}
+	return min
+}
+
+func getEdgeEarliestLineNum(e *d2graph.Edge) int {
+	min := int(math.MaxInt64)
+	for _, ref := range e.References {
+		if ref.MapKey == nil {
+			continue
+		}
+		min = go2.IntMin(min, ref.MapKey.Range.Start.Line)
+	}
+	return min
+}
+
+func hasEdge(o *d2graph.Object) bool {
+	for _, ref := range o.References {
+		if ref.MapKey != nil && len(ref.MapKey.Edges) > 0 {
+			return true
+		}
+	}
+
+	return false
+}
+
+func containsAnyMessage(o *d2graph.Object, messages []*d2graph.Edge) bool {
+	for _, m := range messages {
+		if containsMessage(o, m) {
+			return true
+		}
+	}
+	return false
+}
+
+func containsMessage(o *d2graph.Object, m *d2graph.Edge) bool {
+	for _, ref := range m.References {
+		curr := ref.ScopeObj
+		for curr != nil {
+			if curr == o {
+				return true
+			}
+			curr = curr.Parent
+		}
+	}
+	return false
+}
+
+func newSequenceDiagram(objects []*d2graph.Object, messages []*d2graph.Edge) *sequenceDiagram {
+	var actors []*d2graph.Object
+	var groups []*d2graph.Object
+
+	for _, obj := range objects {
+		messageRecipient := false
+		for _, m := range messages {
+			if m.Src == obj || m.Dst == obj {
+				messageRecipient = true
+				break
+			}
+		}
+		hasNote := false
+		for _, ch := range obj.ChildrenArray {
+			// if the child contains a message, it's a span, not a note
+			if !containsAnyMessage(ch, messages) {
+				hasNote = true
+				break
+			}
+		}
+		if messageRecipient || hasNote {
+			actors = append(actors, obj)
+		} else {
+			queue := []*d2graph.Object{obj}
+			// Groups may have more nested groups
+			for len(queue) > 0 {
+				curr := queue[0]
+				groups = append(groups, curr)
+				queue = queue[1:]
+				for _, c := range curr.ChildrenArray {
+					queue = append(queue, c)
+				}
+			}
+		}
+	}
+
 	sd := &sequenceDiagram{
 		messages:        messages,
 		actors:          actors,
+		groups:          groups,
 		spans:           nil,
+		notes:           nil,
 		lifelines:       nil,
 		objectRank:      make(map[*d2graph.Object]int),
 		firstMessage:    make(map[*d2graph.Object]*d2graph.Edge),
 		lastMessage:     make(map[*d2graph.Object]*d2graph.Edge),
-		messageYStep:   MIN_MESSAGE_DISTANCE,
+		yStep:           MIN_MESSAGE_DISTANCE,
 		actorXStep:      MIN_ACTOR_DISTANCE,
 		maxActorHeight:  0.,
+		verticalIndices: make(map[string]int),
 	}
 
 	for rank, actor := range actors {
@@ -63,21 +159,35 @@ func newSequenceDiagram(actors []*d2graph.Object, messages []*d2graph.Edge) *seq
 		queue := make([]*d2graph.Object, len(actor.ChildrenArray))
 		copy(queue, actor.ChildrenArray)
 		for len(queue) > 0 {
-			span := queue[0]
+			child := queue[0]
 			queue = queue[1:]
 
-			// spans are always rectangles and have no labels
+			// spans are children of actors that have edges
-			span.Attributes.Label = d2graph.Scalar{Value: ""}
+			// notes are children of actors with no edges and no children
-			span.Attributes.Shape = d2graph.Scalar{Value: shape.SQUARE_TYPE}
+			// edge groups are children of actors with no edges and children edges
-			sd.spans = append(sd.spans, span)
+			if hasEdge(child) && !containsAnyMessage(child, sd.messages) {
-			sd.objectRank[span] = rank
+				// spans have no labels
+				// TODO why not? Spans should be able to
+				child.Attributes.Label = d2graph.Scalar{Value: ""}
+				child.Attributes.Shape = d2graph.Scalar{Value: shape.SQUARE_TYPE}
+				sd.spans = append(sd.spans, child)
+				sd.objectRank[child] = rank
+			} else {
+				sd.verticalIndices[child.AbsID()] = getObjEarliestLineNum(child)
+				// TODO change to page type when it doesn't look deformed
+				child.Attributes.Shape = d2graph.Scalar{Value: shape.SQUARE_TYPE}
+				sd.notes = append(sd.notes, child)
+				sd.objectRank[child] = rank
+				child.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))
+			}
 
-			queue = append(queue, span.ChildrenArray...)
+			queue = append(queue, child.ChildrenArray...)
 		}
 	}
 
 	for _, message := range sd.messages {
-		sd.messageYStep = math.Max(sd.messageYStep, float64(message.LabelDimensions.Height))
+		sd.verticalIndices[message.AbsID()] = getEdgeEarliestLineNum(message)
+		sd.yStep = math.Max(sd.yStep, float64(message.LabelDimensions.Height))
 
 		// ensures that long labels, spanning over multiple actors, don't make for large gaps between actors
 		// by distributing the label length across the actors rank difference
@@ -99,7 +209,7 @@ func newSequenceDiagram(actors []*d2graph.Object, messages []*d2graph.Edge) *seq
 
 	}
 
-	sd.messageYStep += VERTICAL_PAD
+	sd.yStep += VERTICAL_PAD
 	sd.maxActorHeight += VERTICAL_PAD
 	if sd.root.LabelHeight != nil {
 		sd.maxActorHeight += float64(*sd.root.LabelHeight)
@@ -115,10 +225,69 @@ func (sd *sequenceDiagram) layout() error {
 	}
 	sd.placeSpans()
 	sd.adjustRouteEndpoints()
+	sd.placeNotes()
+	sd.routeMessages()
+	sd.placeGroups()
 	sd.addLifelineEdges()
 	return nil
 }
 
+func (sd *sequenceDiagram) placeGroups() {
+	for _, group := range sd.groups {
+		sd.placeGroup(group)
+	}
+}
+
+func (sd *sequenceDiagram) placeGroup(group *d2graph.Object) {
+	minX := math.Inf(1)
+	minY := math.Inf(1)
+	maxX := math.Inf(-1)
+	maxY := math.Inf(-1)
+
+	for _, m := range sd.messages {
+		if containsMessage(group, m) {
+			for _, p := range m.Route {
+				minX = math.Min(minX, p.X)
+				minY = math.Min(minY, p.Y)
+				maxX = math.Max(maxX, p.X)
+				maxY = math.Max(maxY, p.Y)
+			}
+		}
+	}
+	// Groups should horizontally encompass all notes of the actor
+	for _, n := range sd.notes {
+		inGroup := false
+		for _, ref := range n.References {
+			curr := ref.UnresolvedScopeObj
+			for curr != nil {
+				if curr == group {
+					inGroup = true
+					break
+				}
+				curr = curr.Parent
+			}
+			if inGroup {
+				break
+			}
+		}
+		if inGroup {
+			minY = math.Min(minY, n.TopLeft.Y)
+			maxY = math.Max(maxY, n.TopLeft.Y+n.Height)
+			minX = math.Min(minX, n.TopLeft.X)
+			maxX = math.Max(maxX, n.TopLeft.X+n.Width)
+		}
+	}
+
+	group.Box = geo.NewBox(
+		geo.NewPoint(
+			minX-HORIZONTAL_PAD,
+			minY-(MIN_MESSAGE_DISTANCE/2.),
+		),
+		maxX-minX+HORIZONTAL_PAD*2,
+		maxY-minY+MIN_MESSAGE_DISTANCE,
+	)
+}
+
 // placeActors places actors bottom aligned, side by side
 func (sd *sequenceDiagram) placeActors() {
 	x := 0.
@@ -127,7 +296,10 @@ func (sd *sequenceDiagram) placeActors() {
 		var yOffset float64
 		if shape == d2target.ShapeImage || shape == d2target.ShapePerson {
 			actor.LabelPosition = go2.Pointer(string(label.OutsideBottomCenter))
-			yOffset = sd.maxActorHeight - actor.Height - float64(*actor.LabelHeight)
+			yOffset = sd.maxActorHeight - actor.Height
+			if actor.LabelHeight != nil {
+				yOffset -= float64(*actor.LabelHeight)
+			}
 		} else {
 			actor.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))
 			yOffset = sd.maxActorHeight - actor.Height
@@ -147,11 +319,19 @@ func (sd *sequenceDiagram) placeActors() {
 //        │
 func (sd *sequenceDiagram) addLifelineEdges() {
 	lastRoute := sd.messages[len(sd.messages)-1].Route
-	endY := lastRoute[len(lastRoute)-1].Y + MIN_MESSAGE_DISTANCE
+	endY := 0.
+	for _, p := range lastRoute {
+		endY = math.Max(endY, p.Y)
+	}
+	for _, note := range sd.notes {
+		endY = math.Max(endY, note.TopLeft.Y+note.Height)
+	}
+	endY += sd.yStep
+
 	for _, actor := range sd.actors {
 		actorBottom := actor.Center()
 		actorBottom.Y = actor.TopLeft.Y + actor.Height
-		if *actor.LabelPosition == string(label.OutsideBottomCenter) {
+		if *actor.LabelPosition == string(label.OutsideBottomCenter) && actor.LabelHeight != nil {
 			actorBottom.Y += float64(*actor.LabelHeight) + LIFELINE_LABEL_PAD
 		}
 		actorLifelineEnd := actor.Center()
@@ -174,6 +354,31 @@ func (sd *sequenceDiagram) addLifelineEdges() {
 	}
 }
 
+func (sd *sequenceDiagram) placeNotes() {
+	rankToX := make(map[int]float64)
+	for _, actor := range sd.actors {
+		rankToX[sd.objectRank[actor]] = actor.Center().X
+	}
+
+	for i, note := range sd.notes {
+		verticalIndex := sd.verticalIndices[note.AbsID()]
+		y := sd.maxActorHeight + sd.yStep
+
+		for _, msg := range sd.messages {
+			if sd.verticalIndices[msg.AbsID()] < verticalIndex {
+				y += sd.yStep
+			}
+		}
+		for _, otherNote := range sd.notes[:i] {
+			y += otherNote.Height + sd.yStep
+		}
+
+		x := rankToX[sd.objectRank[note]] - (note.Width / 2.)
+		note.Box.TopLeft = geo.NewPoint(x, y)
+		note.ZIndex = 1
+	}
+}
+
 // placeSpans places spans over the object lifeline
 // ┌──────────┐
 // │  actor   │
@@ -253,7 +458,7 @@ func (sd *sequenceDiagram) placeSpans() {
 // routeMessages routes horizontal edges (messages) from Src to Dst lifeline (actor/span center)
 // in another step, routes are adjusted to spans borders when necessary
 func (sd *sequenceDiagram) routeMessages() error {
-	startY := sd.maxActorHeight + sd.messageYStep
+	startY := sd.maxActorHeight + sd.yStep
 	for _, message := range sd.messages {
 		message.ZIndex = 2
 		var startX, endX float64
@@ -267,7 +472,6 @@ func (sd *sequenceDiagram) routeMessages() error {
 		} else {
 			return fmt.Errorf("could not find center of %s", message.Dst.AbsID())
 		}
-		isLeftToRight := startX < endX
 		isToDescendant := strings.HasPrefix(message.Dst.AbsID(), message.Src.AbsID())
 		isFromDescendant := strings.HasPrefix(message.Src.AbsID(), message.Dst.AbsID())
 		isSelfMessage := message.Src == message.Dst
@@ -287,17 +491,10 @@ func (sd *sequenceDiagram) routeMessages() error {
 				geo.NewPoint(endX, startY),
 			}
 		}
-		startY += sd.messageYStep
+		startY += sd.yStep
 
 		if message.Attributes.Label.Value != "" {
-			if isSelfMessage || isFromDescendant || isToDescendant {
 			message.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))
-			} else if isLeftToRight {
-				message.LabelPosition = go2.Pointer(string(label.OutsideTopCenter))
-			} else {
-				// the label will be placed above the message because the orientation is based on the edge normal vector
-				message.LabelPosition = go2.Pointer(string(label.OutsideBottomCenter))
-			}
 		}
 	}
 	return nil

d2lib/c.go

@@ -1,5 +1,3 @@
-//go:build cgo
-
 package d2lib
 
 import "oss.terrastruct.com/d2/d2layouts/d2dagrelayout"

d2plugin/plugin_dagre.go

@@ -1,4 +1,4 @@
-//go:build cgo && !nodagre
+//go:build !nodagre
 
 package d2plugin
 

d2plugin/plugin_elk.go

@@ -1,4 +1,4 @@
-//go:build cgo && !noelk
+//go:build !noelk
 
 package d2plugin
 

d2renderers/d2latex/latex.go

@@ -1,5 +1,3 @@
-//go:build cgo
-
 package d2latex
 
 import (
@@ -9,8 +7,8 @@ import (
 	"regexp"
 	"strconv"
 
+	"github.com/dop251/goja"
 	"oss.terrastruct.com/util-go/xdefer"
-	v8 "rogchap.com/v8go"
 )
 
 var pxPerEx = 8
@@ -30,24 +28,24 @@ var svgRe = regexp.MustCompile(`<svg[^>]+width="([0-9\.]+)ex" height="([0-9\.]+)
 
 func Render(s string) (_ string, err error) {
 	defer xdefer.Errorf(&err, "latex failed to parse")
-	v8ctx := v8.NewContext()
+	vm := goja.New()
 
-	if _, err := v8ctx.RunScript(polyfillsJS, "polyfills.js"); err != nil {
+	if _, err := vm.RunString(polyfillsJS); err != nil {
 		return "", err
 	}
 
-	if _, err := v8ctx.RunScript(mathjaxJS, "mathjax.js"); err != nil {
+	if _, err := vm.RunString(mathjaxJS); err != nil {
 		return "", err
 	}
 
-	if _, err := v8ctx.RunScript(setupJS, "setup.js"); err != nil {
+	if _, err := vm.RunString(setupJS); err != nil {
 		return "", err
 	}
 
-	val, err := v8ctx.RunScript(fmt.Sprintf(`adaptor.innerHTML(html.convert(`+"`"+"%s`"+`, {
+	val, err := vm.RunString(fmt.Sprintf(`adaptor.innerHTML(html.convert(`+"`"+"%s`"+`, {
   em: %d,
   ex: %d,
-}))`, s, pxPerEx*2, pxPerEx), "value.js")
+}))`, s, pxPerEx*2, pxPerEx))
 	if err != nil {
 		return "", err
 	}

d2renderers/d2latex/latex_stub.go

@@ -1,13 +0,0 @@
-//go:build !cgo
-
-package d2latex
-
-import "errors"
-
-func Render(s string) (string, error) {
-	return "", errors.New("not found in build")
-}
-
-func Measure(s string) (width, height int, _ error) {
-	return 0, 0, errors.New("not found in build")
-}

d2renderers/d2svg/d2svg.go

@@ -337,26 +337,15 @@ func pathData(connection d2target.Connection, idToShape map[string]d2target.Shap
 	return strings.Join(path, " ")
 }
 
-func labelMask(id string, connection d2target.Connection, labelTL, tl, br *geo.Point) string {
+func makeLabelMask(connection d2target.Connection, labelTL, tl, br *geo.Point) string {
-	width := br.X - tl.X
+	return fmt.Sprintf(`<rect x="%f" y="%f" width="%d" height="%d" fill="black"></rect>`,
-	height := br.Y - tl.Y
-	return strings.Join([]string{
-		fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="%f" y="%f" width="%f" height="%f">`,
-			id, tl.X, tl.Y, width, height,
-		),
-		fmt.Sprintf(`<rect x="%f" y="%f" width="%f" height="%f" fill="white"></rect>`,
-			tl.X, tl.Y, width, height,
-		),
-		fmt.Sprintf(`<rect x="%f" y="%f" width="%d" height="%d" fill="black"></rect>`,
 		labelTL.X, labelTL.Y,
 		connection.LabelWidth,
 		connection.LabelHeight,
-		),
+	)
-		`</mask>`,
-	}, "\n")
 }
 
-func drawConnection(writer io.Writer, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape) {
+func drawConnection(writer io.Writer, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape) (labelMask string) {
 	fmt.Fprintf(writer, `<g id="%s">`, escapeText(connection.ID))
 	var markerStart string
 	if connection.SrcArrow != d2target.NoArrowhead {
@@ -387,7 +376,6 @@ func drawConnection(writer io.Writer, connection d2target.Connection, markers ma
 	}
 
 	var labelTL *geo.Point
-	var mask string
 	if connection.Label != "" {
 		labelTL = connection.GetLabelTopLeft()
 		labelTL.X = math.Round(labelTL.X)
@@ -420,18 +408,15 @@ func drawConnection(writer io.Writer, connection d2target.Connection, markers ma
 			br.X = math.Max(br.X, labelTL.X+float64(connection.LabelWidth))
 			br.Y = math.Max(br.Y, labelTL.Y+float64(connection.LabelHeight))
 
-			maskID := fmt.Sprintf("mask-%s", hash(connection.ID))
+			labelMask = makeLabelMask(connection, labelTL, tl, br)
-			fmt.Fprint(writer, labelMask(maskID, connection, labelTL, tl, br))
-			mask = fmt.Sprintf(`mask="url(#%s)" `, maskID)
 		}
 	}
 
-	fmt.Fprintf(writer, `<path d="%s" class="connection" style="fill:none;%s" %s%s%s/>`,
+	fmt.Fprintf(writer, `<path d="%s" class="connection" style="fill:none;%s" %s%smask="url(#labels)"/>`,
 		pathData(connection, idToShape),
 		connectionStyle(connection),
 		markerStart,
 		markerEnd,
-		mask,
 	)
 
 	if connection.Label != "" {
@@ -476,6 +461,7 @@ func drawConnection(writer io.Writer, connection d2target.Connection, markers ma
 		fmt.Fprint(writer, renderArrowheadLabel(connection, connection.DstLabel, position, size, size))
 	}
 	fmt.Fprintf(writer, `</g>`)
+	return
 }
 
 func renderArrowheadLabel(connection d2target.Connection, text string, position, width, height float64) string {
@@ -955,7 +941,7 @@ func embedFonts(buf *bytes.Buffer) {
 // TODO minify output at end
 func Render(diagram *d2target.Diagram) ([]byte, error) {
 	buf := &bytes.Buffer{}
-	_, _ = setViewbox(buf, diagram)
+	w, h := setViewbox(buf, diagram)
 
 	buf.WriteString(fmt.Sprintf(`<style type="text/css">
 <![CDATA[
@@ -996,10 +982,14 @@ func Render(diagram *d2target.Diagram) ([]byte, error) {
 
 	sortObjects(allObjects)
 
+	var labelMasks []string
 	markers := map[string]struct{}{}
 	for _, obj := range allObjects {
 		if c, is := obj.(d2target.Connection); is {
-			drawConnection(buf, c, markers, idToShape)
+			labelMask := drawConnection(buf, c, markers, idToShape)
+			if labelMask != "" {
+				labelMasks = append(labelMasks, labelMask)
+			}
 		} else if s, is := obj.(d2target.Shape); is {
 			err := drawShape(buf, s)
 			if err != nil {
@@ -1010,6 +1000,20 @@ func Render(diagram *d2target.Diagram) ([]byte, error) {
 		}
 	}
 
+	if len(labelMasks) > 0 {
+		fmt.Fprint(buf, strings.Join([]string{
+			fmt.Sprintf(`<mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="%d" height="%d">`,
+				w, h,
+			),
+			fmt.Sprintf(`<rect x="0" y="0" width="%d" height="%d" fill="white"></rect>`,
+				w,
+				h,
+			),
+			strings.Join(labelMasks, "\n"),
+			`</mask>`,
+		}, "\n"))
+	}
+
 	embedFonts(buf)
 
 	buf.WriteString(`</svg>`)

e2etests/e2e_test.go

@@ -97,7 +97,6 @@ func run(t *testing.T, tc testCase) {
 	layoutsTested := []string{"dagre", "elk"}
 
 	for _, layoutName := range layoutsTested {
-
 		var layout func(context.Context, *d2graph.Graph) error
 		if layoutName == "dagre" {
 			layout = d2dagrelayout.Layout
@@ -105,7 +104,6 @@ func run(t *testing.T, tc testCase) {
 			layout = d2elklayout.Layout
 		}
 		diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
-			UTF16:   true,
 			Ruler:   ruler,
 			ThemeID: 0,
 			Layout:  layout,

e2etests/stable_test.go

@@ -1336,6 +1336,79 @@ b.1.2 -> b: to parent
 b -> a.1.2: actor
 a.1 -> b.3`,
 		},
+		{
+			name: "icon-label",
+			script: `ww: {
+  label: hello
+  icon: https://icons.terrastruct.com/essentials/time.svg
+}
+`,
+		},
+		{
+			name: "sequence_diagram_note",
+			script: `shape: sequence_diagram
+a; b; c; d
+a -> b
+a.explanation
+a.another explanation
+b -> c
+b."Some one who believes imaginary things\n appear right before your i's."
+c -> b: okay
+d."The earth is like a tiny grain of sand, only much, much heavier"
+`,
+		},
+		{
+			name: "sequence_diagram_groups",
+			script: `shape: sequence_diagram
+a;b;c;d
+a -> b
+ggg: {
+	_.a -> _.b: lala
+}
+group 1: {
+  _.b -> _.c
+	_.c -> _.b: ey
+  nested guy: {
+    _._.c -> _._.b: okay
+  }
+  _.b.t1 -> _.c.t1
+  _.b.t1.t2 -> _.c.t1
+  _.c.t1 -> _.b.t1
+}
+group b: {
+  _.b -> _.c
+	_.c."what would arnold say"
+  _.c -> _.b: okay
+}
+choo: {
+  _.d."this note"
+}
+`,
+		},
+		{
+			name: "sequence_diagram_real",
+			script: `How this is rendered: {
+  shape: sequence_diagram
+
+	CLI; d2ast; d2compiler; d2layout; d2exporter; d2themes; d2renderer
+
+  CLI -> d2ast: "'How this is rendered: {...}'"
+  d2ast -> CLI: tokenized AST
+  CLI -> d2compiler: compile AST
+  d2compiler."measurements also take place"
+  d2compiler -> CLI: objects and edges
+  CLI -> d2layout.layout: run layout engines
+  d2layout.layout -> d2sequencelayout: run engine on shape: sequence_diagram, temporarily remove
+  d2layout.layout -> d2dagrelayout: run core engine on rest
+  d2layout.layout <- d2sequencelayout: add back in sequence diagrams
+  d2layout -> CLI: diagram with correct positions and dimensions
+  CLI -> d2exporter: export diagram with chosen theme and renderer
+  d2exporter.export -> d2themes: get theme styles
+  d2exporter.export -> d2renderer: render to SVG
+  d2exporter.export -> CLI: resulting SVG
+}
+`,
+		},
 	}
 
 	runa(t, tcs)

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

@@ -14,7 +14,7 @@ width="486" height="552" viewBox="-100 -100 486 552"><style type="text/css">
 }
 
 ]]>
-</style><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)" /></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)" /></g><style type="text/css"><![CDATA[
+</style><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(#labels)"/></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(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

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

@@ -14,7 +14,7 @@ width="446" height="552" viewBox="-88 -88 446 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="31" y="12" width="113" height="126" 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">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)" /></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)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="31" y="12" width="113" height="126" 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">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(#labels)"/></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(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

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

@@ -14,7 +14,7 @@ width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
 }
 
 ]]>
-</style><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)" /></g><style type="text/css"><![CDATA[
+</style><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(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

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

@@ -14,7 +14,7 @@ width="313" height="552" viewBox="-88 -88 313 552"><style type="text/css">
 }
 
 ]]>
-</style><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)" /></g><style type="text/css"><![CDATA[
+</style><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(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

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

@@ -14,7 +14,7 @@ width="414" height="752" viewBox="-100 -100 414 752"><style type="text/css">
 }
 
 ]]>
-</style><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-bold" 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-bold" 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)" /></g><style type="text/css"><![CDATA[
+</style><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-bold" 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-bold" 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(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

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

@@ -14,7 +14,7 @@ width="464" height="862" viewBox="-88 -88 464 862"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="13" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.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-bold" 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="88" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.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)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="13" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.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-bold" 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="88" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.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(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

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

@@ -14,10 +14,10 @@ width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
 }
 
 ]]>
-</style><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><mask id="mask-1985426896" maskUnits="userSpaceOnUse" x="40.000000" y="112.000000" width="33.000000" height="128.000000">
+</style><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(#labels)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="313" height="552">
-<rect x="40.000000" y="112.000000" width="33.000000" height="128.000000" fill="white"></rect>
+<rect x="0" y="0" width="313" height="552" fill="white"></rect>
 <rect x="40.000000" y="166.000000" width="33" height="21" fill="black"></rect>
-</mask><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(#mask-1985426896)" /><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

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

@@ -14,10 +14,10 @@ width="313" height="673" viewBox="-88 -88 313 673"><style type="text/css">
 }
 
 ]]>
-</style><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><mask id="mask-1985426896" maskUnits="userSpaceOnUse" x="52.000000" y="124.000000" width="33.000000" height="249.000000">
+</style><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(#labels)"/><text class="text-italic" x="68.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="313" height="673">
-<rect x="52.000000" y="124.000000" width="33.000000" height="249.000000" fill="white"></rect>
+<rect x="0" y="0" width="313" height="673" fill="white"></rect>
 <rect x="52.000000" y="238.000000" width="33" height="21" fill="black"></rect>
-</mask><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(#mask-1985426896)" /><text class="text-italic" x="68.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg

@@ -14,10 +14,10 @@ width="401" height="552" viewBox="-144 -100 401 552"><style type="text/css">
 }
 
 ]]>
-</style><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-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><mask id="mask-1985426896" maskUnits="userSpaceOnUse" x="-44.000000" y="106.000000" width="201.000000" height="140.000000">
+</style><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-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </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-1247258845)" mask="url(#labels)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="218.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="401" height="552">
-<rect x="-44.000000" y="106.000000" width="201.000000" height="140.000000" fill="white"></rect>
+<rect x="0" y="0" width="401" height="552" fill="white"></rect>
 <rect x="-44.000000" y="166.000000" width="201" height="21" fill="black"></rect>
-</mask><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-1247258845)" mask="url(#mask-1985426896)" /><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="218.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg

@@ -14,10 +14,10 @@ width="401" height="673" viewBox="14 -88 401 673"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="159" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="159" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.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-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><mask id="mask-1985426896" maskUnits="userSpaceOnUse" x="115.000000" y="118.000000" width="201.000000" height="261.000000">
+</style><g id="a"><g class="shape" ><rect x="159" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="159" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.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-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 215.000000 140.000000 L 215.000000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#labels)"/><text class="text-italic" x="215.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="229.000000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="229.000000" y="351.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="401" height="673">
-<rect x="115.000000" y="118.000000" width="201.000000" height="261.000000" fill="white"></rect>
+<rect x="0" y="0" width="401" height="673" fill="white"></rect>
 <rect x="115.000000" y="238.000000" width="201" height="21" fill="black"></rect>
-</mask><path d="M 215.000000 140.000000 L 215.000000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#mask-1985426896)" /><text class="text-italic" x="215.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="229.000000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="229.000000" y="351.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg

@@ -14,13 +14,11 @@ width="634" height="652" viewBox="-100 -100 634 652"><style type="text/css">
 }
 
 ]]>
-</style><g id="aaa"><g class="shape" ><rect x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><mask id="mask-3626742025" maskUnits="userSpaceOnUse" x="105.000000" y="174.000000" width="23.000000" height="104.000000">
+</style><g id="aaa"><g class="shape" ><rect x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#labels)"/><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[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 297.555754 298.965997 C 199.400000 241.000000 170.600000 216.000000 157.643805 177.893545" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#labels)"/><text class="text-italic" x="215.500000" y="256.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="634" height="652">
-<rect x="105.000000" y="174.000000" width="23.000000" height="104.000000" fill="white"></rect>
+<rect x="0" y="0" width="634" height="652" fill="white"></rect>
 <rect x="105.000000" y="215.000000" width="23" height="21" fill="black"></rect>
-</mask><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#mask-3626742025)" /><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[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><mask id="mask-2957989372" maskUnits="userSpaceOnUse" x="145.000000" y="162.000000" width="168.000000" height="153.000000">
-<rect x="145.000000" y="162.000000" width="168.000000" height="153.000000" fill="white"></rect>
 <rect x="203.000000" y="240.000000" width="25" height="21" fill="black"></rect>
-</mask><path d="M 297.555754 298.965997 C 199.400000 241.000000 170.600000 216.000000 157.643805 177.893545" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#mask-2957989372)" /><text class="text-italic" x="215.500000" y="256.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/chaos1/elk/sketch.exp.svg

@@ -14,13 +14,11 @@ width="630" height="869" viewBox="-88 -88 630 869"><style type="text/css">
 }
 
 ]]>
-</style><g id="aaa"><g class="shape" ><rect x="12" y="364" width="430" height="317" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="227.000000" y="397.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 85 36 C 85 12 144.85 12 151.5 12 C 158.15 12 218 12 218 36 V 114 C 218 138 158.15 138 151.5 138 C 144.85 138 85 138 85 114 V 36 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 85 36 C 85 60 144.85 60 151.5 60 C 158.15 60 218 60 218 36" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="151.500000" y="90.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 238 120.5231 L 238 12 L 368 12 L 368 120.5231 C 346.3333 97.2206 324.6667 97.2206 303 120.5231 C 281.3333 143.8256 259.6667 143.8256 238 120.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="303.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 87 439 V 520 H 153 V 565 L 183 520 H 219 V 439 H 87 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="153.000000" y="482.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="239" y="439" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="303.000000" y="505.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><mask id="mask-3626742025" maskUnits="userSpaceOnUse" x="292.000000" y="563.000000" width="23.000000" height="120.000000">
+</style><g id="aaa"><g class="shape" ><rect x="12" y="364" width="430" height="317" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="227.000000" y="397.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 85 36 C 85 12 144.85 12 151.5 12 C 158.15 12 218 12 218 36 V 114 C 218 138 158.15 138 151.5 138 C 144.85 138 85 138 85 114 V 36 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 85 36 C 85 60 144.85 60 151.5 60 C 158.15 60 218 60 218 36" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="151.500000" y="90.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 238 120.5231 L 238 12 L 368 12 L 368 120.5231 C 346.3333 97.2206 324.6667 97.2206 303 120.5231 C 281.3333 143.8256 259.6667 143.8256 238 120.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="303.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 87 439 V 520 H 153 V 565 L 183 520 H 219 V 439 H 87 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="153.000000" y="482.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="239" y="439" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="303.000000" y="505.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 303.000000 567.000000 L 303.000000 679.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#labels)"/><text class="text-italic" x="303.500000" y="629.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[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 303.000000 142.000000 L 303.000000 437.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#labels)"/><text class="text-italic" x="303.500000" y="294.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="630" height="869">
-<rect x="292.000000" y="563.000000" width="23.000000" height="120.000000" fill="white"></rect>
+<rect x="0" y="0" width="630" height="869" fill="white"></rect>
 <rect x="292.000000" y="613.000000" width="23" height="21" fill="black"></rect>
-</mask><path d="M 303.000000 567.000000 L 303.000000 679.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#mask-3626742025)" /><text class="text-italic" x="303.500000" y="629.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[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><mask id="mask-2957989372" maskUnits="userSpaceOnUse" x="291.000000" y="124.000000" width="25.000000" height="329.000000">
-<rect x="291.000000" y="124.000000" width="25.000000" height="329.000000" fill="white"></rect>
 <rect x="291.000000" y="278.000000" width="25" height="21" fill="black"></rect>
-</mask><path d="M 303.000000 142.000000 L 303.000000 437.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#mask-2957989372)" /><text class="text-italic" x="303.500000" y="294.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg

@@ -14,7 +14,7 @@ width="724" height="626" viewBox="-100 -100 724 626"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="524" height="426" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="262.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="50" width="444" height="326" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="262.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="80" y="100" width="364" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="262.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="130" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="187.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 245.659544 173.545716 C 273.333333 154.932384 282.500000 150.000000 285.250000 150.000000 C 288.000000 150.000000 291.666667 162.600000 294.416667 181.500000 C 297.166667 200.400000 297.166667 225.600000 294.416667 244.500000 C 291.666667 263.400000 273.333333 271.067616 247.319087 253.570489" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="a.(b -&gt; b.c)[0]"><path d="M 245.791667 183.835630 C 300.000000 156.944882 317.500000 150.000000 322.750000 150.000000 C 328.000000 150.000000 335.000000 162.600000 340.250000 181.500000 C 345.500000 200.400000 345.500000 225.600000 340.250000 244.500000 C 335.000000 263.400000 300.000000 269.055118 247.583334 243.053150" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 243.047451 236.531831 C 244.066667 235.317672 244.266667 235.079418 246.571765 232.333427" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="0" y="0" width="524" height="426" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="262.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="50" width="444" height="326" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="262.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="80" y="100" width="364" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="262.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="130" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="187.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 245.659544 173.545716 C 273.333333 154.932384 282.500000 150.000000 285.250000 150.000000 C 288.000000 150.000000 291.666667 162.600000 294.416667 181.500000 C 297.166667 200.400000 297.166667 225.600000 294.416667 244.500000 C 291.666667 263.400000 273.333333 271.067616 247.319087 253.570489" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 245.791667 183.835630 C 300.000000 156.944882 317.500000 150.000000 322.750000 150.000000 C 328.000000 150.000000 335.000000 162.600000 340.250000 181.500000 C 345.500000 200.400000 345.500000 225.600000 340.250000 244.500000 C 335.000000 263.400000 300.000000 269.055118 247.583334 243.053150" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 243.047451 236.531831 C 244.066667 235.317672 244.266667 235.079418 246.571765 232.333427" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg

@@ -14,7 +14,7 @@ width="774" height="801" viewBox="-88 -88 774 801"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="574" height="601" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="299.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="424" height="451" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="299.000000" y="116.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="162" y="162" width="264" height="276" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.000000" y="187.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="237" y="237" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 162.000000 540.000000 L 162.000000 609.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="a.(b -&gt; b.c)[0]"><path d="M 237.000000 89.000000 L 237.000000 158.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 294.000000 365.000000 L 294.000000 443.000000 S 294.000000 453.000000 304.000000 453.000000 L 426.000000 453.000000 S 436.000000 453.000000 436.000000 443.000000 L 436.000000 91.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="12" y="12" width="574" height="601" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="299.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="424" height="451" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="299.000000" y="116.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="162" y="162" width="264" height="276" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.000000" y="187.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="237" y="237" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 162.000000 540.000000 L 162.000000 609.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 237.000000 89.000000 L 237.000000 158.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 294.000000 365.000000 L 294.000000 443.000000 S 294.000000 453.000000 304.000000 453.000000 L 426.000000 453.000000 S 436.000000 453.000000 436.000000 443.000000 L 436.000000 91.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg

@@ -14,7 +14,7 @@ width="313" height="778" viewBox="-100 -100 313 778"><style type="text/css">
 }
 
 ]]>
-</style><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="c"><g class="shape" ><rect x="0" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="518.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 45.000993 127.969391 C 38.269912 166.000000 38.300000 186.000000 44.791388 222.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(b -&gt; c)[0]"><path d="M 45.000993 353.969391 C 38.269912 392.000000 38.300000 412.000000 44.791388 448.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(c -&gt; b)[0]"><path d="M 67.999007 450.030609 C 74.730088 412.000000 74.700000 392.000000 68.208612 355.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(b -&gt; a)[0]"><path d="M 67.999007 224.030609 C 74.730088 186.000000 74.700000 166.000000 68.208612 129.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><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="c"><g class="shape" ><rect x="0" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="518.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 45.000993 127.969391 C 38.269912 166.000000 38.300000 186.000000 44.791388 222.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[0]"><path d="M 45.000993 353.969391 C 38.269912 392.000000 38.300000 412.000000 44.791388 448.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(c -&gt; b)[0]"><path d="M 67.999007 450.030609 C 74.730088 412.000000 74.700000 392.000000 68.208612 355.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; a)[0]"><path d="M 67.999007 224.030609 C 74.730088 186.000000 74.700000 166.000000 68.208612 129.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg

@@ -14,7 +14,7 @@ width="313" height="778" viewBox="-88 -88 313 778"><style type="text/css">
 }
 
 ]]>
-</style><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="c"><g class="shape" ><rect x="12" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="530.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 49.666667 140.000000 L 49.666667 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(b -&gt; c)[0]"><path d="M 49.666667 366.000000 L 49.666667 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(c -&gt; b)[0]"><path d="M 87.333333 462.000000 L 87.333333 368.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(b -&gt; a)[0]"><path d="M 87.333333 236.000000 L 87.333333 142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><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="c"><g class="shape" ><rect x="12" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="530.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 49.666667 140.000000 L 49.666667 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[0]"><path d="M 49.666667 366.000000 L 49.666667 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(c -&gt; b)[0]"><path d="M 87.333333 462.000000 L 87.333333 368.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; a)[0]"><path d="M 87.333333 236.000000 L 87.333333 142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg

@@ -22,7 +22,7 @@ width="955" height="818" viewBox="-100 -100 955 818"><style type="text/css">
 </text><text class="text-mono" x="0" y="6.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<tspan fill="#0086b3">panic</tspan>(<tspan fill="#dd1144">&quot;crypto:&#160;RegisterHash&#160;of&#160;unknown&#160;hash&#160;function&quot;</tspan>)
 </text><text class="text-mono" x="0" y="7.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;}
 </text><text class="text-mono" x="0" y="8.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;hashes[h]&#160;=&#160;f
-</text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="321" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="377.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="321" y="492" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="378.000000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 377.500000 128.000000 C 377.500000 166.000000 377.500000 186.000000 377.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(hey -&gt; y)[0]"><path d="M 377.500000 394.000000 C 377.500000 432.000000 377.500000 452.000000 377.500000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="321" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="377.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="321" y="492" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="378.000000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 377.500000 128.000000 C 377.500000 166.000000 377.500000 186.000000 377.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(hey -&gt; y)[0]"><path d="M 377.500000 394.000000 C 377.500000 432.000000 377.500000 452.000000 377.500000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg

@@ -22,7 +22,7 @@ width="955" height="818" viewBox="-88 -88 955 818"><style type="text/css">
 </text><text class="text-mono" x="0" y="6.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<tspan fill="#0086b3">panic</tspan>(<tspan fill="#dd1144">&quot;crypto:&#160;RegisterHash&#160;of&#160;unknown&#160;hash&#160;function&quot;</tspan>)
 </text><text class="text-mono" x="0" y="7.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;}
 </text><text class="text-mono" x="0" y="8.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;hashes[h]&#160;=&#160;f
-</text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="333" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="389.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="333" y="504" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="390.000000" y="570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[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 389.500000 140.000000 L 389.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(hey -&gt; y)[0]"><path d="M 389.500000 406.000000 L 389.500000 500.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="333" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="389.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="333" y="504" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="390.000000" y="570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[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 389.500000 140.000000 L 389.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(hey -&gt; y)[0]"><path d="M 389.500000 406.000000 L 389.500000 500.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg

@@ -14,7 +14,7 @@ width="494" height="1178" viewBox="-100 -100 494 1178"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="41" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="40" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="0" y="652" width="294" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="685.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="91" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.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="90" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="40" y="702" width="214" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="731.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="90" y="752" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="818.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</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 147.000000 178.000000 C 147.000000 216.000000 147.000000 236.000000 147.000000 251.000000 C 147.000000 266.000000 147.000000 336.000000 147.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 147.000000 504.000000 C 147.000000 542.000000 147.000000 562.000000 147.000000 577.000000 C 147.000000 592.000000 147.000000 612.000000 147.000000 627.000000 C 147.000000 642.000000 147.000000 712.000000 147.000000 748.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="41" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="40" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="0" y="652" width="294" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="685.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="91" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.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="90" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="40" y="702" width="214" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="731.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="90" y="752" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="818.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</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 147.000000 178.000000 C 147.000000 216.000000 147.000000 236.000000 147.000000 251.000000 C 147.000000 266.000000 147.000000 336.000000 147.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 147.000000 504.000000 C 147.000000 542.000000 147.000000 562.000000 147.000000 577.000000 C 147.000000 592.000000 147.000000 612.000000 147.000000 627.000000 C 147.000000 642.000000 147.000000 712.000000 147.000000 748.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/connected_container/elk/sketch.exp.svg

@@ -14,7 +14,7 @@ width="614" height="1403" viewBox="-88 -88 614 1403"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="88" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="87" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="12" y="784" width="414" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="817.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="163" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.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="162" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="87" y="864" width="264" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="893.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="162" y="939" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</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 219.000000 215.000000 L 219.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 219.000000 601.000000 L 219.000000 935.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="88" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="87" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="12" y="784" width="414" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="817.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="163" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.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="162" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="87" y="864" width="264" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="893.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="162" y="939" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</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 219.000000 215.000000 L 219.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 219.000000 601.000000 L 219.000000 935.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg

@@ -14,7 +14,7 @@ width="786" height="1530" viewBox="-100 -100 786 1530"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="416" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="333" y="226" width="253" height="878" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="459.500000" y="259.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="0" y="502" width="293" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="535.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="404" y="1204" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="459.500000" y="1270.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="416" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="40" y="552" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="581.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="383" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="90" y="602" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.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 472.750000 128.000000 C 472.750000 166.000000 472.750000 236.000000 472.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 434.660405 403.723672 C 412.134956 442.000000 406.250000 462.000000 406.250000 477.000000 C 406.250000 492.000000 365.650000 569.600000 206.920003 638.409063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(d -&gt; g.e)[0]"><path d="M 148.471500 828.336433 C 380.900000 868.000000 439.500000 888.000000 439.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(g.e -&gt; f)[0]"><path d="M 439.500000 1056.000000 C 439.500000 1094.000000 441.300000 1164.000000 447.791388 1200.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(f -&gt; g)[0]"><path d="M 508.941346 1202.411883 C 538.345133 1164.000000 546.000000 1144.000000 546.000000 1108.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(g -&gt; d.h)[0]"><path d="M 330.619728 598.681599 C 268.500000 621.200000 316.500000 603.800000 256.260544 625.636803" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="416" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="333" y="226" width="253" height="878" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="459.500000" y="259.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="0" y="502" width="293" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="535.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="404" y="1204" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="459.500000" y="1270.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="416" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="40" y="552" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="581.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="383" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="90" y="602" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.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 472.750000 128.000000 C 472.750000 166.000000 472.750000 236.000000 472.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 434.660405 403.723672 C 412.134956 442.000000 406.250000 462.000000 406.250000 477.000000 C 406.250000 492.000000 365.650000 569.600000 206.920003 638.409063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 148.471500 828.336433 C 380.900000 868.000000 439.500000 888.000000 439.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 439.500000 1056.000000 C 439.500000 1094.000000 441.300000 1164.000000 447.791388 1200.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(f -&gt; g)[0]"><path d="M 508.941346 1202.411883 C 538.345133 1164.000000 546.000000 1144.000000 546.000000 1108.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 330.619728 598.681599 C 268.500000 621.200000 316.500000 603.800000 256.260544 625.636803" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/container_edges/elk/sketch.exp.svg

@@ -14,7 +14,7 @@ width="754" height="1308" viewBox="-88 -88 754 1308"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="162" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="87" y="253" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="285.000000" y="286.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="12" y="639" width="413" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="672.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="445" y="639" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="500.500000" y="705.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="162" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="87" y="719" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="748.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="295" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="351.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="162" y="794" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="860.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.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 218.500000 140.000000 L 218.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 218.500000 456.000000 L 218.500000 790.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(d -&gt; g.e)[0]"><path d="M 87.000000 1072.000000 L 87.000000 1110.000000 S 87.000000 1120.000000 97.000000 1120.000000 L 556.000000 1120.000000 S 566.000000 1120.000000 566.000000 1110.000000 L 566.000000 198.000000 S 566.000000 188.000000 556.000000 188.000000 L 361.500000 188.000000 S 351.500000 188.000000 351.500000 198.000000 L 351.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(g.e -&gt; f)[0]"><path d="M 351.500000 456.000000 L 351.500000 574.000000 S 351.500000 584.000000 361.500000 584.000000 L 472.000000 584.000000 S 482.000000 584.000000 482.000000 594.000000 L 482.000000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(f -&gt; g)[0]"><path d="M 519.000000 637.000000 L 519.000000 208.000000 S 519.000000 198.000000 509.000000 198.000000 L 371.500000 198.000000 S 361.500000 198.000000 361.500000 208.000000 L 361.500000 249.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(g -&gt; d.h)[0]"><path d="M 228.500000 531.000000 L 228.500000 715.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="162" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="87" y="253" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="285.000000" y="286.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="12" y="639" width="413" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="672.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="445" y="639" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="500.500000" y="705.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="162" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="87" y="719" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="748.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="295" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="351.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="162" y="794" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="860.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.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 218.500000 140.000000 L 218.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 218.500000 456.000000 L 218.500000 790.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 87.000000 1072.000000 L 87.000000 1110.000000 S 87.000000 1120.000000 97.000000 1120.000000 L 556.000000 1120.000000 S 566.000000 1120.000000 566.000000 1110.000000 L 566.000000 198.000000 S 566.000000 188.000000 556.000000 188.000000 L 361.500000 188.000000 S 351.500000 188.000000 351.500000 198.000000 L 351.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 351.500000 456.000000 L 351.500000 574.000000 S 351.500000 584.000000 361.500000 584.000000 L 472.000000 584.000000 S 482.000000 584.000000 482.000000 594.000000 L 482.000000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(f -&gt; g)[0]"><path d="M 519.000000 637.000000 L 519.000000 208.000000 S 519.000000 198.000000 509.000000 198.000000 L 371.500000 198.000000 S 361.500000 198.000000 361.500000 208.000000 L 361.500000 249.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 228.500000 531.000000 L 228.500000 715.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg

@@ -14,10 +14,10 @@ width="345" height="552" viewBox="-100 -100 345 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="alpha"><g class="shape" ><rect x="0" y="0" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="72.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="5" y="226" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[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><mask id="mask-2829690043" maskUnits="userSpaceOnUse" x="47.000000" y="112.000000" width="52.000000" height="128.000000">
+</style><g id="alpha"><g class="shape" ><rect x="0" y="0" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="72.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="5" y="226" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 72.500000 128.000000 C 72.500000 166.000000 72.500000 186.000000 72.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="73.000000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="345" height="552">
-<rect x="47.000000" y="112.000000" width="52.000000" height="128.000000" fill="white"></rect>
+<rect x="0" y="0" width="345" height="552" fill="white"></rect>
 <rect x="47.000000" y="166.000000" width="52" height="21" fill="black"></rect>
-</mask><path d="M 72.500000 128.000000 C 72.500000 166.000000 72.500000 186.000000 72.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-2829690043)" /><text class="text-italic" x="73.000000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/font_colors/elk/sketch.exp.svg

@@ -14,10 +14,10 @@ width="345" height="673" viewBox="-88 -88 345 673"><style type="text/css">
 }
 
 ]]>
-</style><g id="alpha"><g class="shape" ><rect x="12" y="12" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="84.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="17" y="359" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[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><mask id="mask-2829690043" maskUnits="userSpaceOnUse" x="59.000000" y="124.000000" width="52.000000" height="249.000000">
+</style><g id="alpha"><g class="shape" ><rect x="12" y="12" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="84.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="17" y="359" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[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 84.500000 140.000000 L 84.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="85.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="345" height="673">
-<rect x="59.000000" y="124.000000" width="52.000000" height="249.000000" fill="white"></rect>
+<rect x="0" y="0" width="345" height="673" fill="white"></rect>
 <rect x="59.000000" y="238.000000" width="52" height="21" fill="black"></rect>
-</mask><path d="M 84.500000 140.000000 L 84.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-2829690043)" /><text class="text-italic" x="85.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg

@@ -14,16 +14,12 @@ width="1965" height="793" viewBox="-88 -88 1965 793"><style type="text/css">
 }
 
 ]]>
-</style><g id="size XS"><g class="shape" ><rect x="1465" y="419" width="145" height="122" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="482.000000" style="text-anchor:middle;font-size:13px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="1634" y="35" width="140" height="123" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1704.000000" y="99.000000" style="text-anchor:middle;font-size:14px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="1630" y="419" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1703.500000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="1116" y="20" width="153" height="131" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1192.500000" y="90.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="12" y="17" width="177" height="136" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="100.500000" y="91.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="429" y="15" width="204" height="141" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="531.000000" y="93.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="653" y="12" width="237" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.500000" y="94.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1469" y="42" width="137" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="100.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1289" y="25" width="160" height="121" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1369.000000" y="87.000000" style="text-anchor:middle;font-size:12px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="910" y="21" width="186" height="128" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1003.000000" y="89.000000" style="text-anchor:middle;font-size:18px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="209" y="19" width="200" height="132" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="309.000000" y="90.000000" style="text-anchor:middle;font-size:21px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="575" y="419" width="393" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.500000" y="533.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[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><mask id="mask-1394600666" maskUnits="userSpaceOnUse" x="1517.000000" y="144.000000" width="42.000000" height="289.000000">
+</style><g id="size XS"><g class="shape" ><rect x="1465" y="419" width="145" height="122" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="482.000000" style="text-anchor:middle;font-size:13px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="1634" y="35" width="140" height="123" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1704.000000" y="99.000000" style="text-anchor:middle;font-size:14px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="1630" y="419" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1703.500000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="1116" y="20" width="153" height="131" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1192.500000" y="90.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="12" y="17" width="177" height="136" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="100.500000" y="91.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="429" y="15" width="204" height="141" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="531.000000" y="93.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="653" y="12" width="237" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.500000" y="94.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1469" y="42" width="137" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="100.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1289" y="25" width="160" height="121" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1369.000000" y="87.000000" style="text-anchor:middle;font-size:12px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="910" y="21" width="186" height="128" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1003.000000" y="89.000000" style="text-anchor:middle;font-size:18px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="209" y="19" width="200" height="132" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="309.000000" y="90.000000" style="text-anchor:middle;font-size:21px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="575" y="419" width="393" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.500000" y="533.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[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 1537.500000 160.000000 L 1537.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="1538.000000" y="292.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 1703.500000 160.000000 L 1703.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="1704.000000" y="294.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 771.500000 160.000000 L 771.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="771.500000" y="306.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="1965" height="793">
-<rect x="1517.000000" y="144.000000" width="42.000000" height="289.000000" fill="white"></rect>
+<rect x="0" y="0" width="1965" height="793" fill="white"></rect>
 <rect x="1517.000000" y="282.000000" width="42" height="13" fill="black"></rect>
-</mask><path d="M 1537.500000 160.000000 L 1537.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-1394600666)" /><text class="text-italic" x="1538.000000" y="292.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><mask id="mask-4025368117" maskUnits="userSpaceOnUse" x="1672.000000" y="144.000000" width="64.000000" height="289.000000">
-<rect x="1672.000000" y="144.000000" width="64.000000" height="289.000000" fill="white"></rect>
 <rect x="1672.000000" y="279.000000" width="64" height="19" fill="black"></rect>
-</mask><path d="M 1703.500000 160.000000 L 1703.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-4025368117)" /><text class="text-italic" x="1704.000000" y="294.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><mask id="mask-3852064055" maskUnits="userSpaceOnUse" x="672.000000" y="144.000000" width="199.000000" height="289.000000">
-<rect x="672.000000" y="144.000000" width="199.000000" height="289.000000" fill="white"></rect>
 <rect x="672.000000" y="258.000000" width="199" height="61" fill="black"></rect>
-</mask><path d="M 771.500000 160.000000 L 771.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#mask-3852064055)" /><text class="text-italic" x="771.500000" y="306.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><style type="text/css"><![CDATA[
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg

@@ -1027,7 +1027,7 @@ title for the link, surrounded in quotes. For example:</p>
 <h3>Code</h3>
 <p>Unlike a pre-formatted code block, a code span indicates code within a
 normal paragraph. For example:</p>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1469" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1525.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1469" y="5174" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1525.500000" y="5240.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1525.500000 128.000000 C 1525.500000 166.000000 1525.500000 186.000000 1525.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 1525.500000 5076.000000 C 1525.500000 5114.000000 1525.500000 5134.000000 1525.500000 5170.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1469" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1525.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1469" y="5174" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1525.500000" y="5240.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1525.500000 128.000000 C 1525.500000 166.000000 1525.500000 186.000000 1525.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 1525.500000 5076.000000 C 1525.500000 5114.000000 1525.500000 5134.000000 1525.500000 5170.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg

@@ -1027,7 +1027,7 @@ title for the link, surrounded in quotes. For example:</p>
 <h3>Code</h3>
 <p>Unlike a pre-formatted code block, a code span indicates code within a
 normal paragraph. For example:</p>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1481" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1481" y="5186" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="5252.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1537.500000 140.000000 L 1537.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 1537.500000 5088.000000 L 1537.500000 5182.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1481" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1481" y="5186" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="5252.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1537.500000 140.000000 L 1537.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 1537.500000 5088.000000 L 1537.500000 5182.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/hr/dagre/sketch.exp.svg

@@ -774,7 +774,7 @@ width="938" height="786" viewBox="-100 -100 938 786"><style type="text/css">
 can <a href="/projects/markdown/syntax.text">see the source for it by adding '.text' to the URL</a>.</p>
 <hr />
 <h2>Overview</h2>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="313" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="369.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="313" y="460" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="369.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 369.000000 128.000000 C 369.000000 166.000000 369.000000 186.000000 369.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 369.000000 362.000000 C 369.000000 400.000000 369.000000 420.000000 369.000000 456.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="313" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="369.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="313" y="460" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="369.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 369.000000 128.000000 C 369.000000 166.000000 369.000000 186.000000 369.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 369.000000 362.000000 C 369.000000 400.000000 369.000000 420.000000 369.000000 456.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/hr/elk/sketch.exp.svg

@@ -774,7 +774,7 @@ width="938" height="786" viewBox="-88 -88 938 786"><style type="text/css">
 can <a href="/projects/markdown/syntax.text">see the source for it by adding '.text' to the URL</a>.</p>
 <hr />
 <h2>Overview</h2>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="325" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="381.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="325" y="472" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="381.500000" y="538.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 381.000000 140.000000 L 381.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 381.000000 374.000000 L 381.000000 468.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="325" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="381.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="325" y="472" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="381.500000" y="538.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 381.000000 140.000000 L 381.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 381.000000 374.000000 L 381.000000 468.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/icon-label/dagre/board.exp.json

@@ -0,0 +1,56 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "ww",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 140,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/essentials/time.svg",
+        "RawPath": "",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "hello",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 40,
+      "labelHeight": 26,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/stable/icon-label/elk/board.exp.json

@@ -0,0 +1,56 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "ww",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 140,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/essentials/time.svg",
+        "RawPath": "",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "hello",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 40,
+      "labelHeight": 26,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/stable/images/dagre/sketch.exp.svg

@@ -14,7 +14,7 @@ width="328" height="587" viewBox="-100 -131 328 587"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="-15.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="228" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="213.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 64.000000 130.000000 C 64.000000 168.000000 64.000000 188.000000 64.000000 224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="-15.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="228" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="213.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 64.000000 130.000000 C 64.000000 168.000000 64.000000 188.000000 64.000000 224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/images/elk/sketch.exp.svg

@@ -14,7 +14,7 @@ width="328" height="587" viewBox="-88 -119 328 587"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="-3.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="240" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="225.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 76.000000 142.000000 L 76.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="-3.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="240" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="225.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 76.000000 142.000000 L 76.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

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

@@ -476,7 +476,7 @@
       "underline": false,
       "labelWidth": 31,
       "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPosition": "OUTSIDE_TOP_CENTER",
       "zIndex": 0,
       "level": 1
     },
@@ -565,7 +565,7 @@
       "underline": false,
       "labelWidth": 20,
       "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPosition": "OUTSIDE_TOP_CENTER",
       "zIndex": 0,
       "level": 2
     },

e2etests/testdata/stable/investigate/elk/board.exp.json

@@ -476,7 +476,7 @@
       "underline": false,
       "labelWidth": 31,
       "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPosition": "OUTSIDE_TOP_CENTER",
       "zIndex": 0,
       "level": 1
     },
@@ -565,7 +565,7 @@
       "underline": false,
       "labelWidth": 20,
       "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPosition": "OUTSIDE_TOP_CENTER",
       "zIndex": 0,
       "level": 2
     },

e2etests/testdata/stable/li1/dagre/sketch.exp.svg

@@ -782,7 +782,7 @@ width="579" height="752" viewBox="-100 -100 579 752"><style type="text/css">
 </ul>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="133" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="189.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="133" y="426" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="189.500000" y="492.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 189.500000 128.000000 C 189.500000 166.000000 189.500000 186.000000 189.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 189.500000 328.000000 C 189.500000 366.000000 189.500000 386.000000 189.500000 422.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="133" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="189.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="133" y="426" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="189.500000" y="492.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 189.500000 128.000000 C 189.500000 166.000000 189.500000 186.000000 189.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 189.500000 328.000000 C 189.500000 366.000000 189.500000 386.000000 189.500000 422.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/li1/elk/sketch.exp.svg

@@ -782,7 +782,7 @@ width="579" height="752" viewBox="-88 -88 579 752"><style type="text/css">
 </ul>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="145" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="145" y="438" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="504.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 201.500000 140.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 201.500000 340.000000 L 201.500000 434.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="145" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="145" y="438" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="504.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 201.500000 140.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(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 201.500000 340.000000 L 201.500000 434.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/li2/dagre/sketch.exp.svg

@@ -778,7 +778,7 @@ width="445" height="728" viewBox="-100 -100 445 728"><style type="text/css">
 </ul>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="66" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="122.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="66" y="402" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="122.500000" y="468.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 122.500000 128.000000 C 122.500000 166.000000 122.500000 186.000000 122.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 122.500000 304.000000 C 122.500000 342.000000 122.500000 362.000000 122.500000 398.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="66" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="122.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="66" y="402" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="122.500000" y="468.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 122.500000 128.000000 C 122.500000 166.000000 122.500000 186.000000 122.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 122.500000 304.000000 C 122.500000 342.000000 122.500000 362.000000 122.500000 398.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/li2/elk/sketch.exp.svg

@@ -778,7 +778,7 @@ width="445" height="728" viewBox="-88 -88 445 728"><style type="text/css">
 </ul>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="78" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="134.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="78" y="414" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="134.500000" y="480.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 134.500000 140.000000 L 134.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 134.500000 316.000000 L 134.500000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="78" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="134.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="78" y="414" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="134.500000" y="480.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 134.500000 140.000000 L 134.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 134.500000 316.000000 L 134.500000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/li3/dagre/sketch.exp.svg

@@ -803,7 +803,7 @@ width="547" height="1164" viewBox="-100 -100 547 1164"><style type="text/css">
 </ul>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="117" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="173.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="117" y="838" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="173.500000" y="904.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 173.500000 128.000000 C 173.500000 166.000000 173.500000 186.000000 173.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 173.500000 740.000000 C 173.500000 778.000000 173.500000 798.000000 173.500000 834.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="117" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="173.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="117" y="838" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="173.500000" y="904.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 173.500000 128.000000 C 173.500000 166.000000 173.500000 186.000000 173.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 173.500000 740.000000 C 173.500000 778.000000 173.500000 798.000000 173.500000 834.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/li3/elk/sketch.exp.svg

@@ -803,7 +803,7 @@ width="547" height="1164" viewBox="-88 -88 547 1164"><style type="text/css">
 </ul>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="129" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="185.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="129" y="850" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="185.500000" y="916.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 185.500000 140.000000 L 185.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 185.500000 752.000000 L 185.500000 846.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="129" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="185.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="129" y="850" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="185.500000" y="916.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 185.500000 140.000000 L 185.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 185.500000 752.000000 L 185.500000 846.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/li4/dagre/sketch.exp.svg

@@ -801,7 +801,7 @@ sit amet, consectetuer adipiscing elit.</p>
 <p>Another item in the same list.</p>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="404" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="404" y="702" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="768.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 460.000000 128.000000 C 460.000000 166.000000 460.000000 186.000000 460.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 460.000000 604.000000 C 460.000000 642.000000 460.000000 662.000000 460.000000 698.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="404" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="404" y="702" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="768.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 460.000000 128.000000 C 460.000000 166.000000 460.000000 186.000000 460.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 460.000000 604.000000 C 460.000000 642.000000 460.000000 662.000000 460.000000 698.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/li4/elk/sketch.exp.svg

@@ -801,7 +801,7 @@ sit amet, consectetuer adipiscing elit.</p>
 <p>Another item in the same list.</p>
 </li>
 </ul>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="416" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="416" y="714" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="780.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 472.000000 140.000000 L 472.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 472.000000 616.000000 L 472.000000 710.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="416" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="416" y="714" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="780.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 472.000000 140.000000 L 472.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 472.000000 616.000000 L 472.000000 710.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg

@@ -771,7 +771,7 @@ width="466" height="702" viewBox="-100 -100 466 702"><style type="text/css">
   margin: 0 -1.6em 0.25em 0.2em;
 }
 </style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="226.000000" width="266" height="50"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><h1>Markdown: Syntax</h1>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="77" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="133.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="77" y="376" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="133.500000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 133.000000 128.000000 C 133.000000 166.000000 133.000000 186.000000 133.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 133.000000 278.000000 C 133.000000 316.000000 133.000000 336.000000 133.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="77" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="133.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="77" y="376" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="133.500000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 133.000000 128.000000 C 133.000000 166.000000 133.000000 186.000000 133.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 133.000000 278.000000 C 133.000000 316.000000 133.000000 336.000000 133.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg

@@ -771,7 +771,7 @@ width="466" height="702" viewBox="-88 -88 466 702"><style type="text/css">
   margin: 0 -1.6em 0.25em 0.2em;
 }
 </style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="238.000000" width="266" height="50"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><h1>Markdown: Syntax</h1>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="89" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="145.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="89" y="388" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="145.500000" y="454.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 145.000000 140.000000 L 145.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 145.000000 290.000000 L 145.000000 384.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="89" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="145.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="89" y="388" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="145.500000" y="454.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 145.000000 140.000000 L 145.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 145.000000 290.000000 L 145.000000 384.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/markdown/dagre/sketch.exp.svg

@@ -777,7 +777,7 @@ width="731" height="838" viewBox="-100 -100 731 838"><style type="text/css">
 <li>Visits always give pleasure: if not on arrival, then on the departure</li>
 </ul>
 <p><em>Festivity Level 1</em>: Your guests are chatting amiably with each other.</p>
-</div></foreignObject></g></g><g id="x"><g class="shape" ><rect x="209" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="265.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="209" y="512" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="266.000000" y="578.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[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 265.500000 128.000000 C 265.500000 166.000000 265.500000 186.000000 265.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(hey -&gt; y)[0]"><path d="M 265.500000 414.000000 C 265.500000 452.000000 265.500000 472.000000 265.500000 508.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="x"><g class="shape" ><rect x="209" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="265.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="209" y="512" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="266.000000" y="578.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[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 265.500000 128.000000 C 265.500000 166.000000 265.500000 186.000000 265.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(hey -&gt; y)[0]"><path d="M 265.500000 414.000000 C 265.500000 452.000000 265.500000 472.000000 265.500000 508.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/markdown/elk/sketch.exp.svg

@@ -777,7 +777,7 @@ width="731" height="838" viewBox="-88 -88 731 838"><style type="text/css">
 <li>Visits always give pleasure: if not on arrival, then on the departure</li>
 </ul>
 <p><em>Festivity Level 1</em>: Your guests are chatting amiably with each other.</p>
-</div></foreignObject></g></g><g id="x"><g class="shape" ><rect x="221" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="277.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="221" y="524" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="278.000000" y="590.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[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 277.500000 140.000000 L 277.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(hey -&gt; y)[0]"><path d="M 277.500000 426.000000 L 277.500000 520.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="x"><g class="shape" ><rect x="221" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="277.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="221" y="524" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="278.000000" y="590.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[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 277.500000 140.000000 L 277.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(hey -&gt; y)[0]"><path d="M 277.500000 426.000000 L 277.500000 520.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg

@@ -775,7 +775,7 @@ width="396" height="763" viewBox="-100 -100 396 763"><style type="text/css">
 	of: &quot;json&quot;,
 }
 </code></pre>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="42" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="98.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="42" y="437" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="98.500000" y="503.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 98.000000 128.000000 C 98.000000 166.000000 98.000000 186.000000 98.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 98.000000 339.000000 C 98.000000 377.000000 98.000000 397.000000 98.000000 433.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="42" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="98.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="42" y="437" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="98.500000" y="503.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 98.000000 128.000000 C 98.000000 166.000000 98.000000 186.000000 98.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 98.000000 339.000000 C 98.000000 377.000000 98.000000 397.000000 98.000000 433.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg

@@ -775,7 +775,7 @@ width="396" height="763" viewBox="-88 -88 396 763"><style type="text/css">
 	of: &quot;json&quot;,
 }
 </code></pre>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="54" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="110.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="54" y="449" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="110.500000" y="515.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 110.000000 140.000000 L 110.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 110.000000 351.000000 L 110.000000 445.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="54" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="110.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="54" y="449" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="110.500000" y="515.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 110.000000 140.000000 L 110.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 110.000000 351.000000 L 110.000000 445.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg

@@ -776,7 +776,7 @@ width="412" height="803" viewBox="-100 -100 412 803"><style type="text/css">
 	of: &quot;json&quot;,
 }
 </code></pre>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="50" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="106.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="50" y="477" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="106.500000" y="543.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 106.000000 128.000000 C 106.000000 166.000000 106.000000 186.000000 106.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 106.000000 379.000000 C 106.000000 417.000000 106.000000 437.000000 106.000000 473.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="50" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="106.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="50" y="477" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="106.500000" y="543.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 106.000000 128.000000 C 106.000000 166.000000 106.000000 186.000000 106.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 106.000000 379.000000 C 106.000000 417.000000 106.000000 437.000000 106.000000 473.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg

@@ -776,7 +776,7 @@ width="412" height="803" viewBox="-88 -88 412 803"><style type="text/css">
 	of: &quot;json&quot;,
 }
 </code></pre>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="62" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="118.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="62" y="489" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="118.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 118.000000 140.000000 L 118.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><g id="(md -&gt; b)[0]"><path d="M 118.000000 391.000000 L 118.000000 485.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="62" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="118.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="62" y="489" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="118.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 118.000000 140.000000 L 118.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(md -&gt; b)[0]"><path d="M 118.000000 391.000000 L 118.000000 485.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }