Merge branch 'master' into fix-null

2022-12-26 11:22:37 -08:00 · 2022-12-26 11:22:37 -08:00 · 7beff718aa
commit 7beff718aa
parent a7ad0f4e24 903dbfc749
225 changed files with 15714 additions and 3666 deletions
--- a/README.md
+++ b/README.md
@ -202,11 +202,13 @@ let us know and we'll be happy to include it here!
 - **VSCode extension**: [https://github.com/terrastruct/d2-vscode](https://github.com/terrastruct/d2-vscode)
 - **Vim extension**: [https://github.com/terrastruct/d2-vim](https://github.com/terrastruct/d2-vim)
 - **Obsidian plugin**: [https://github.com/terrastruct/d2-obsidian](https://github.com/terrastruct/d2-obsidian)
+- **Slack app**: [https://d2lang.com/tour/slack](https://d2lang.com/tour/slack)

 ### Community plugins

 - **Tree-sitter grammar**: [https://github.com/pleshevskiy/tree-sitter-d2](https://github.com/pleshevskiy/tree-sitter-d2)
 - **Emacs major mode**: [https://github.com/andorsk/d2-mode](https://github.com/andorsk/d2-mode)
+- **Goldmark extension**: [https://github.com/FurqanSoftware/goldmark-d2](https://github.com/FurqanSoftware/goldmark-d2)
 - **Telegram bot**: [https://github.com/meinside/telegram-d2-bot](https://github.com/meinside/telegram-d2-bot)
 - **Postgres importer**: [https://github.com/zekenie/d2-erd-from-postgres](https://github.com/zekenie/d2-erd-from-postgres)
 - **Structurizr to D2 exporter**: [https://github.com/goto1134/structurizr-d2-exporter](https://github.com/goto1134/structurizr-d2-exporter)
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@ -1,16 +1,34 @@
+Many have asked how to get the diagram to look like the one on D2's [cheat sheet](https://d2lang.com/tour/cheat-sheet). With this release, now you can! See [https://d2lang.com/tour/themes](https://d2lang.com/tour/themes) for more.
+
+![sketch](https://user-images.githubusercontent.com/3120367/209235066-d8ad6b3c-d19b-491d-b014-407f3c47407f.png)
+
+The Slack app for D2 has now hit production, so if you're looking for the quickest way to express a visual model without interrupting the conversation flow, go to [http://d2lang.com/tour/slack](http://d2lang.com/tour/slack) to install.
+
+Hope everyone is enjoying the holidays this week!
+
 #### Features 🚀

 - `sketch` flag renders the diagram to look like it was sketched by hand. [#492](https://github.com/terrastruct/d2/pull/492)
+- `near` now takes constants like `top-center`, particularly useful for diagram titles. See [docs](https://d2lang.com/tour/text#near-a-constant) for more. [#525](https://github.com/terrastruct/d2/pull/525)

 #### Improvements 🧹

- Improved label placements for shapes with images to avoid overlapping container labels. [#474](https://github.com/terrastruct/d2/pull/474)
+- Improved label placements for shapes with images and icons to avoid overlapping labels. [#474](https://github.com/terrastruct/d2/pull/474)
+- Themes are applied to `sql_table` and `class` shapes. [#521](https://github.com/terrastruct/d2/pull/521)
+- `class` shapes use monospaced font. [#521](https://github.com/terrastruct/d2/pull/521)
+- Sequence diagram edge group labels have more reasonable padding. [#512](https://github.com/terrastruct/d2/pull/512)
+- ELK layout engine preserves order of nodes. [#282](https://github.com/terrastruct/d2/issues/282)
+- Non-markdown text (`shape: text` without language block) works with `bold`, `italic`, `underline`, and `font-size`. [#528](https://github.com/terrastruct/d2/pull/528)
+- Markdown headings set font-family explicitly, so that external stylesheets with more specific targeting don't override it. [#525](https://github.com/terrastruct/d2/pull/525)

 #### Bugfixes ⛑️

 - `d2 fmt` only rewrites if it has changes, instead of always rewriting. [#470](https://github.com/terrastruct/d2/pull/470)
- Fixed an issue where text could overflow in sql_table shapes. [#458](https://github.com/terrastruct/d2/pull/458)
- Fixed an issue with elk layouts accounting for edge labels as if they were placed on the side of the edge. [#483](https://github.com/terrastruct/d2/pull/483)
- Fixed an issue where dagre layouts may not have enough spacing for all edge labels. [#484](https://github.com/terrastruct/d2/pull/484)
- Fixed connections being clipped if they were at the very top or left edges of the diagram. [#493](https://github.com/terrastruct/d2/pull/493)
- Fixed edge case where the key `null` was compiling wrongly. [#507](https://github.com/terrastruct/d2/issues/507)
+- Text no longer overflows in `sql_table` shapes. [#458](https://github.com/terrastruct/d2/pull/458)
+- ELK connection labels are now given the appropriate dimensions. [#483](https://github.com/terrastruct/d2/pull/483)
+- Dagre connection lengths make room for longer labels. [#484](https://github.com/terrastruct/d2/pull/484)
+- Icons with query parameters are escaped to valid SVG XML. [#438](https://github.com/terrastruct/d2/issues/438)
+- Connections at the boundaries no longer get part of its stroke clipped. [#493](https://github.com/terrastruct/d2/pull/493)
+- Fixes edge case where `style` being defined in same scope as `sql_table` causes compiler to skip compiling `sql_table`. [#506](https://github.com/terrastruct/d2/issues/506)
+- Fixes panic passing a non-string value to `constraint`. [#248](https://github.com/terrastruct/d2/issues/248)
+- Fixes edge case where the key `null` was compiling wrongly. [#507](https://github.com/terrastruct/d2/issues/507)
--- a/ci/sub
+++ b/ci/sub
@ -1 +1 @@
-Subproject commit 494f23a574d5d96b369e886aa1cd48df059dc912
+Subproject commit b1ec0a8d430a62b7556211ed8bcd7b6e41e2362c
--- a/d2compiler/compile.go
+++ b/d2compiler/compile.go
@ -583,16 +583,25 @@ func (c *compiler) compileShapes(obj *d2graph.Object) {
 		c.compileShapes(obj)
 	}

-	for _, obj := range obj.ChildrenArray {
-		switch obj.Attributes.Shape.Value {
+	for i := 0; i < len(obj.ChildrenArray); i++ {
+		ch := obj.ChildrenArray[i]
+		switch ch.Attributes.Shape.Value {
 		case d2target.ShapeClass, d2target.ShapeSQLTable:
-			flattenContainer(obj.Graph, obj)
+			flattenContainer(obj.Graph, ch)
 		}
-		if obj.IDVal == "style" {
-			obj.Parent.Attributes.Style = obj.Attributes.Style
+		if ch.IDVal == "style" {
+			obj.Attributes.Style = ch.Attributes.Style
 			if obj.Graph != nil {
-				flattenContainer(obj.Graph, obj)
-				removeObject(obj.Graph, obj)
+				flattenContainer(obj.Graph, ch)
+				for i := 0; i < len(obj.Graph.Objects); i++ {
+					if obj.Graph.Objects[i] == ch {
+						obj.Graph.Objects = append(obj.Graph.Objects[:i], obj.Graph.Objects[i+1:]...)
+						break
+					}
+				}
+				delete(obj.Children, ch.ID)
+				obj.ChildrenArray = append(obj.ChildrenArray[:i], obj.ChildrenArray[i+1:]...)
+				i--
 			}
 		}
 	}
@ -679,6 +688,10 @@ func (c *compiler) compileSQLTable(obj *d2graph.Object) {
 					continue
 				}
 				if n.MapKey.Key.Path[0].Unbox().ScalarString() == "constraint" {
+					if n.MapKey.Value.StringBox().Unbox() == nil {
+						c.errorf(n.MapKey.GetRange().Start, n.MapKey.GetRange().End, "constraint value must be a string")
+						return
+					}
 					d2Col.Constraint = n.MapKey.Value.StringBox().Unbox().ScalarString()
 				}
 			}
@ -706,23 +719,6 @@ func (c *compiler) compileSQLTable(obj *d2graph.Object) {
 	}
 }

-// TODO too similar to flattenContainer, should reconcile in a refactor
-func removeObject(g *d2graph.Graph, obj *d2graph.Object) {
-	for i := 0; i < len(obj.Graph.Objects); i++ {
-		if obj.Graph.Objects[i] == obj {
-			obj.Graph.Objects = append(obj.Graph.Objects[:i], obj.Graph.Objects[i+1:]...)
-			break
-		}
-	}
-	delete(obj.Parent.Children, obj.ID)
-	for i, child := range obj.Parent.ChildrenArray {
-		if obj == child {
-			obj.Parent.ChildrenArray = append(obj.Parent.ChildrenArray[:i], obj.Parent.ChildrenArray[i+1:]...)
-			break
-		}
-	}
-}
-
 func flattenContainer(g *d2graph.Graph, obj *d2graph.Object) {
 	absID := obj.AbsID()

@ -854,9 +850,14 @@ func (c *compiler) validateKeys(obj *d2graph.Object, m *d2ast.Map) {
 func (c *compiler) validateNear(g *d2graph.Graph) {
 	for _, obj := range g.Objects {
 		if obj.Attributes.NearKey != nil {
-			_, ok := g.Root.HasChild(d2graph.Key(obj.Attributes.NearKey))
-			if !ok {
-				c.errorf(obj.Attributes.NearKey.GetRange().Start, obj.Attributes.NearKey.GetRange().End, "near key %#v does not exist. It must be the absolute path to a shape.", d2format.Format(obj.Attributes.NearKey))
+			_, isKey := g.Root.HasChild(d2graph.Key(obj.Attributes.NearKey))
+			_, isConst := d2graph.NearConstants[d2graph.Key(obj.Attributes.NearKey)[0]]
+			if !isKey && !isConst {
+				c.errorf(obj.Attributes.NearKey.GetRange().Start, obj.Attributes.NearKey.GetRange().End, "near key %#v must be the absolute path to a shape or one of the following constants: %s", d2format.Format(obj.Attributes.NearKey), strings.Join(d2graph.NearConstantsArray, ", "))
+				continue
+			}
+			if !isKey && isConst && obj.Parent != g.Root {
+				c.errorf(obj.Attributes.NearKey.GetRange().Start, obj.Attributes.NearKey.GetRange().End, "constant near keys can only be set on root level shapes")
 				continue
 			}
 		}
--- a/d2compiler/compile_test.go
+++ b/d2compiler/compile_test.go
@ -1266,6 +1266,28 @@ x -> y: {
 				}
 			},
 		},
+		{
+			name: "near_constant",
+
+			text: `x.near: top-center
+`,
+		},
+		{
+			name: "near_bad_constant",
+
+			text: `x.near: txop-center
+`,
+			expErr: `d2/testdata/d2compiler/TestCompile/near_bad_constant.d2:1:1: near key "txop-center" must be the absolute path to a shape or one of the following constants: top-left, top-center, top-right, center-left, center-right, bottom-left, bottom-center, bottom-right
+`,
+		},
+		{
+			name: "nested_near_constant",
+
+			text: `x.y.near: top-center
+`,
+			expErr: `d2/testdata/d2compiler/TestCompile/nested_near_constant.d2:1:1: constant near keys can only be set on root level shapes
+`,
+		},
 		{
 			name: "reserved_icon_near_style",

@ -1312,7 +1334,7 @@ y
 			expErr: `d2/testdata/d2compiler/TestCompile/errors/reserved_icon_style.d2:3:9: bad icon url "::????:::%%orange": parse "::????:::%%orange": missing protocol scheme
 d2/testdata/d2compiler/TestCompile/errors/reserved_icon_style.d2:4:18: expected "opacity" to be a number between 0.0 and 1.0
 d2/testdata/d2compiler/TestCompile/errors/reserved_icon_style.d2:5:18: expected "opacity" to be a number between 0.0 and 1.0
-d2/testdata/d2compiler/TestCompile/errors/reserved_icon_style.d2:1:1: near key "y" does not exist. It must be the absolute path to a shape.
+d2/testdata/d2compiler/TestCompile/errors/reserved_icon_style.d2:1:1: near key "y" must be the absolute path to a shape or one of the following constants: top-left, top-center, top-right, center-left, center-right, bottom-left, bottom-center, bottom-right
 `,
 		},
 		{
@ -1660,6 +1682,34 @@ choo: {
 				tassert.Equal(t, "null", g.Objects[0].IDVal)
 			},
 		},
+		{
+			name: "sql-regression",
+
+			text: `a: {
+  style: {
+    fill: lemonchiffon
+  }
+  b: {
+    shape: sql_table
+    c
+  }
+  d
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				tassert.Equal(t, 3, len(g.Objects))
+			},
+		},
+		{
+			name: "sql-panic",
+			text: `test {
+    shape: sql_table
+    test_id: varchar(64) {constraint: [primary_key, foreign_key]}
+}
+`,
+			expErr: `d2/testdata/d2compiler/TestCompile/sql-panic.d2:3:27: constraint value must be a string
+`,
+		},
 	}

 	for _, tc := range testCases {
--- a/d2exporter/export.go
+++ b/d2exporter/export.go
@ -40,6 +40,11 @@ func applyTheme(shape *d2target.Shape, obj *d2graph.Object, theme *d2themes.Them
 	if obj.Attributes.Shape.Value == d2target.ShapeText {
 		shape.Color = theme.Colors.Neutrals.N1
 	}
+	if obj.Attributes.Shape.Value == d2target.ShapeSQLTable || obj.Attributes.Shape.Value == d2target.ShapeClass {
+		shape.PrimaryAccentColor = theme.Colors.B2
+		shape.SecondaryAccentColor = theme.Colors.AA2
+		shape.NeutralAccentColor = theme.Colors.Neutrals.N2
+	}
 }

 func applyStyles(shape *d2target.Shape, obj *d2graph.Object) {
@ -76,19 +81,17 @@ func applyStyles(shape *d2target.Shape, obj *d2graph.Object) {
 	if obj.Attributes.Style.FontColor != nil {
 		shape.Color = obj.Attributes.Style.FontColor.Value
 	}
-	if obj.Attributes.Shape.Value != d2target.ShapeText {
-		if obj.Attributes.Style.Italic != nil {
-			shape.Italic, _ = strconv.ParseBool(obj.Attributes.Style.Italic.Value)
-		}
-		if obj.Attributes.Style.Bold != nil {
-			shape.Bold, _ = strconv.ParseBool(obj.Attributes.Style.Bold.Value)
-		}
-		if obj.Attributes.Style.Underline != nil {
-			shape.Underline, _ = strconv.ParseBool(obj.Attributes.Style.Underline.Value)
-		}
-		if obj.Attributes.Style.Font != nil {
-			shape.FontFamily = obj.Attributes.Style.Font.Value
-		}
+	if obj.Attributes.Style.Italic != nil {
+		shape.Italic, _ = strconv.ParseBool(obj.Attributes.Style.Italic.Value)
+	}
+	if obj.Attributes.Style.Bold != nil {
+		shape.Bold, _ = strconv.ParseBool(obj.Attributes.Style.Bold.Value)
+	}
+	if obj.Attributes.Style.Underline != nil {
+		shape.Underline, _ = strconv.ParseBool(obj.Attributes.Style.Underline.Value)
+	}
+	if obj.Attributes.Style.Font != nil {
+		shape.FontFamily = obj.Attributes.Style.Font.Value
 	}
 }

--- a/d2exporter/export_test.go
+++ b/d2exporter/export_test.go
@ -8,12 +8,15 @@ import (

 	"cdr.dev/slog"

+	tassert "github.com/stretchr/testify/assert"
+
 	"oss.terrastruct.com/util-go/assert"
 	"oss.terrastruct.com/util-go/diff"

 	"oss.terrastruct.com/d2/d2compiler"
 	"oss.terrastruct.com/d2/d2exporter"
 	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
+	"oss.terrastruct.com/d2/d2layouts/d2sequence"
 	"oss.terrastruct.com/d2/d2target"
 	"oss.terrastruct.com/d2/d2themes/d2themescatalog"
 	"oss.terrastruct.com/d2/lib/geo"
@ -80,6 +83,23 @@ y: {shape: square}
 				}
 			},
 		},
+		{
+			name: "sequence_group_position",
+
+			dsl: `hey {
+  shape: sequence_diagram
+	a
+	b
+  group: {
+    a -> b
+  }
+}
+`,
+			assertions: func(t *testing.T, d *d2target.Diagram) {
+				tassert.Equal(t, "hey.group", d.Shapes[3].ID)
+				tassert.Equal(t, "INSIDE_TOP_LEFT", d.Shapes[3].LabelPosition)
+			},
+		},
 	}

 	runa(t, tcs)
@ -219,7 +239,7 @@ func run(t *testing.T, tc testCase) {
 	err = g.SetDimensions(nil, ruler, nil)
 	assert.JSON(t, nil, err)

-	err = d2dagrelayout.Layout(ctx, g)
+	err = d2sequence.Layout(ctx, g, d2dagrelayout.Layout)
 	if err != nil {
 		t.Fatal(err)
 	}
--- a/d2graph/d2graph.go
+++ b/d2graph/d2graph.go
@ -392,17 +392,23 @@ func (obj *Object) GetFill(theme *d2themes.Theme) string {
 		return theme.Colors.Neutrals.N5
 	}

+	if strings.EqualFold(shape, d2target.ShapeSQLTable) || strings.EqualFold(shape, d2target.ShapeClass) {
+		return theme.Colors.Neutrals.N1
+	}
+
 	return theme.Colors.Neutrals.N7
 }

 func (obj *Object) GetStroke(theme *d2themes.Theme, dashGapSize interface{}) string {
 	shape := obj.Attributes.Shape.Value
 	if strings.EqualFold(shape, d2target.ShapeCode) ||
-		strings.EqualFold(shape, d2target.ShapeClass) ||
-		strings.EqualFold(shape, d2target.ShapeSQLTable) ||
 		strings.EqualFold(shape, d2target.ShapeText) {
 		return theme.Colors.Neutrals.N1
 	}
+	if strings.EqualFold(shape, d2target.ShapeClass) ||
+		strings.EqualFold(shape, d2target.ShapeSQLTable) {
+		return theme.Colors.Neutrals.N7
+	}
 	if dashGapSize != 0.0 {
 		return theme.Colors.B2
 	}
@ -435,7 +441,14 @@ func (obj *Object) AbsIDArray() []string {
 }

 func (obj *Object) Text() *d2target.MText {
-	isBold := !obj.IsContainer()
+	isBold := !obj.IsContainer() && obj.Attributes.Shape.Value != "text"
+	isItalic := false
+	if obj.Attributes.Style.Bold != nil && obj.Attributes.Style.Bold.Value == "true" {
+		isBold = true
+	}
+	if obj.Attributes.Style.Italic != nil && obj.Attributes.Style.Italic.Value == "true" {
+		isItalic = true
+	}
 	fontSize := d2fonts.FONT_SIZE_M
 	if obj.OuterSequenceDiagram() == nil {
 		if obj.IsContainer() {
@ -451,11 +464,14 @@ func (obj *Object) Text() *d2target.MText {
 	if obj.Class != nil || obj.SQLTable != nil {
 		fontSize = d2fonts.FONT_SIZE_XL
 	}
+	if obj.Class != nil {
+		isBold = false
+	}
 	return &d2target.MText{
 		Text:     obj.Attributes.Label.Value,
 		FontSize: fontSize,
 		IsBold:   isBold,
-		IsItalic: false,
+		IsItalic: isItalic,
 		Language: obj.Attributes.Language,
 		Shape:    obj.Attributes.Shape.Value,

@ -899,14 +915,18 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 					return err
 				}
 				dims = d2target.NewTextDimensions(width, height)
-			} else {
+			} else if obj.Attributes.Language != "" {
 				var err error
 				dims, err = getMarkdownDimensions(mtexts, ruler, obj.Text(), fontFamily)
 				if err != nil {
 					return err
 				}
+			} else {
+				dims = getTextDimensions(mtexts, ruler, obj.Text(), fontFamily)
 			}
 			innerLabelPadding = 0
+		} else if obj.Attributes.Shape.Value == d2target.ShapeClass {
+			dims = getTextDimensions(mtexts, ruler, obj.Text(), go2.Pointer(d2fonts.SourceCodePro))
 		} else {
 			dims = getTextDimensions(mtexts, ruler, obj.Text(), fontFamily)
 		}
@ -962,7 +982,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 			maxWidth := dims.Width

 			for _, f := range obj.Class.Fields {
-				fdims := getTextDimensions(mtexts, ruler, f.Text(), fontFamily)
+				fdims := getTextDimensions(mtexts, ruler, f.Text(), go2.Pointer(d2fonts.SourceCodePro))
 				if fdims == nil {
 					return fmt.Errorf("dimensions for class field %#v not found", f.Text())
 				}
@ -972,7 +992,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 				}
 			}
 			for _, m := range obj.Class.Methods {
-				mdims := getTextDimensions(mtexts, ruler, m.Text(), fontFamily)
+				mdims := getTextDimensions(mtexts, ruler, m.Text(), go2.Pointer(d2fonts.SourceCodePro))
 				if mdims == nil {
 					return fmt.Errorf("dimensions for class method %#v not found", m.Text())
 				}
@ -991,7 +1011,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 			}
 			if anyRowText != nil {
 				// 10px of padding top and bottom so text doesn't look squished
-				rowHeight := getTextDimensions(mtexts, ruler, anyRowText, fontFamily).Height + 20
+				rowHeight := getTextDimensions(mtexts, ruler, anyRowText, go2.Pointer(d2fonts.SourceCodePro)).Height + 20
 				obj.Height = float64(rowHeight * (len(obj.Class.Fields) + len(obj.Class.Methods) + 2))
 			}
 			// Leave room for padding
@ -1002,23 +1022,29 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 			maxTypeWidth := 0
 			constraintWidth := 0

-			font := d2fonts.SourceSansPro.Font(d2fonts.FONT_SIZE_L, d2fonts.FONT_STYLE_REGULAR)
 			for i := range obj.SQLTable.Columns {
 				// Note: we want to set dimensions of actual column not the for loop copy of the struct
 				c := &obj.SQLTable.Columns[i]
+				ctexts := c.Texts()

-				nameWidth, nameHeight := ruler.Measure(font, c.Name.Label)
-				c.Name.LabelWidth = nameWidth
-				c.Name.LabelHeight = nameHeight
-				if maxNameWidth < nameWidth {
-					maxNameWidth = nameWidth
+				nameDims := getTextDimensions(mtexts, ruler, ctexts[0], fontFamily)
+				if nameDims == nil {
+					return fmt.Errorf("dimensions for sql_table name %#v not found", ctexts[0].Text)
+				}
+				c.Name.LabelWidth = nameDims.Width
+				c.Name.LabelHeight = nameDims.Height
+				if maxNameWidth < nameDims.Width {
+					maxNameWidth = nameDims.Width
 				}

-				typeWidth, typeHeight := ruler.Measure(font, c.Type.Label)
-				c.Type.LabelWidth = typeWidth
-				c.Type.LabelHeight = typeHeight
-				if maxTypeWidth < typeWidth {
-					maxTypeWidth = typeWidth
+				typeDims := getTextDimensions(mtexts, ruler, ctexts[1], fontFamily)
+				if typeDims == nil {
+					return fmt.Errorf("dimensions for sql_table type %#v not found", ctexts[1].Text)
+				}
+				c.Type.LabelWidth = typeDims.Width
+				c.Type.LabelHeight = typeDims.Height
+				if maxTypeWidth < typeDims.Width {
+					maxTypeWidth = typeDims.Width
 				}

 				if c.Constraint != "" {
@ -1084,7 +1110,9 @@ func (g *Graph) Texts() []*d2target.MText {
 			}
 		} else if obj.SQLTable != nil {
 			for _, column := range obj.SQLTable.Columns {
-				texts = appendTextDedup(texts, column.Text())
+				for _, t := range column.Texts() {
+					texts = appendTextDedup(texts, t)
+				}
 			}
 		}
 	}
@ -1170,6 +1198,22 @@ var StyleKeywords = map[string]struct{}{
 	"filled":   {},
 }

+// TODO maybe autofmt should allow other values, and transform them to conform
+// e.g. left-center becomes center-left
+var NearConstantsArray = []string{
+	"top-left",
+	"top-center",
+	"top-right",
+
+	"center-left",
+	"center-right",
+
+	"bottom-left",
+	"bottom-center",
+	"bottom-right",
+}
+var NearConstants map[string]struct{}
+
 func init() {
 	for k, v := range StyleKeywords {
 		ReservedKeywords[k] = v
@ -1177,4 +1221,8 @@ func init() {
 	for k, v := range ReservedKeywordHolders {
 		ReservedKeywords[k] = v
 	}
+	NearConstants = make(map[string]struct{}, len(NearConstantsArray))
+	for _, k := range NearConstantsArray {
+		NearConstants[k] = struct{}{}
+	}
 }
--- a/d2layouts/d2elklayout/layout.go
+++ b/d2layouts/d2elklayout/layout.go
@ -9,7 +9,6 @@ import (
 	_ "embed"
 	"encoding/json"
 	"fmt"
-	"math"
 	"strings"

 	"github.com/dop251/goja"
@ -79,14 +78,16 @@ type ELKGraph struct {
 }

 type ELKLayoutOptions struct {
-	Algorithm         string  `json:"elk.algorithm,omitempty"`
-	HierarchyHandling string  `json:"elk.hierarchyHandling,omitempty"`
-	NodeSpacing       float64 `json:"spacing.nodeNodeBetweenLayers,omitempty"`
-	Padding           string  `json:"elk.padding,omitempty"`
-	EdgeNodeSpacing   float64 `json:"spacing.edgeNodeBetweenLayers,omitempty"`
-	Direction         string  `json:"elk.direction"`
-	SelfLoopSpacing   float64 `json:"elk.spacing.nodeSelfLoop"`
-	InlineEdgeLabels  bool    `json:"elk.edgeLabels.inline,omitempty"`
+	Algorithm           string  `json:"elk.algorithm,omitempty"`
+	HierarchyHandling   string  `json:"elk.hierarchyHandling,omitempty"`
+	NodeSpacing         float64 `json:"spacing.nodeNodeBetweenLayers,omitempty"`
+	Padding             string  `json:"elk.padding,omitempty"`
+	EdgeNodeSpacing     float64 `json:"spacing.edgeNodeBetweenLayers,omitempty"`
+	Direction           string  `json:"elk.direction"`
+	SelfLoopSpacing     float64 `json:"elk.spacing.nodeSelfLoop"`
+	InlineEdgeLabels    bool    `json:"elk.edgeLabels.inline,omitempty"`
+	ConsiderModelOrder  string  `json:"elk.layered.considerModelOrder.strategy,omitempty"`
+	ForceNodeModelOrder bool    `json:"elk.layered.crossingMinimization.forceNodeModelOrder,omitempty"`
 }

 func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
@ -109,11 +110,12 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 	elkGraph := &ELKGraph{
 		ID: "root",
 		LayoutOptions: &ELKLayoutOptions{
-			Algorithm:         "layered",
-			HierarchyHandling: "INCLUDE_CHILDREN",
-			NodeSpacing:       100.0,
-			EdgeNodeSpacing:   50.0,
-			SelfLoopSpacing:   50.0,
+			Algorithm:          "layered",
+			HierarchyHandling:  "INCLUDE_CHILDREN",
+			NodeSpacing:        100.0,
+			EdgeNodeSpacing:    50.0,
+			SelfLoopSpacing:    50.0,
+			ConsiderModelOrder: "NODES_AND_EDGES",
 		},
 	}
 	switch g.Root.Attributes.Direction.Value {
@ -157,7 +159,8 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {

 		if len(obj.ChildrenArray) > 0 {
 			n.LayoutOptions = &ELKLayoutOptions{
-				Padding: "[top=75,left=75,bottom=75,right=75]",
+				Padding:             "[top=75,left=75,bottom=75,right=75]",
+				ForceNodeModelOrder: true,
 			}
 		}

@ -253,7 +256,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 			parentX = parent.TopLeft.X
 			parentY = parent.TopLeft.Y
 		}
-		obj.TopLeft = geo.NewPoint(math.Round(parentX+n.X), math.Round(parentY+n.Y))
+		obj.TopLeft = geo.NewPoint(parentX+n.X, parentY+n.Y)
 		obj.Width = n.Width
 		obj.Height = n.Height

--- a/d2layouts/d2near/layout.go
+++ b/d2layouts/d2near/layout.go
@ -0,0 +1,146 @@
+// d2near applies near keywords when they're constants
+// Intended to be run as the last stage of layout after the diagram has already undergone layout
+package d2near
+
+import (
+	"context"
+	"math"
+	"strings"
+
+	"oss.terrastruct.com/d2/d2graph"
+	"oss.terrastruct.com/d2/d2target"
+	"oss.terrastruct.com/d2/lib/geo"
+	"oss.terrastruct.com/d2/lib/label"
+	"oss.terrastruct.com/util-go/go2"
+)
+
+const pad = 20
+
+// Layout finds the shapes which are assigned constant near keywords and places them.
+func Layout(ctx context.Context, g *d2graph.Graph, constantNears []*d2graph.Object) error {
+	if len(constantNears) == 0 {
+		return nil
+	}
+
+	// Imagine the graph has two long texts, one at top center and one at top left.
+	// Top left should go left enough to not collide with center.
+	// So place the center ones first, then the later ones will consider them for bounding box
+	for _, processCenters := range []bool{true, false} {
+		for _, obj := range constantNears {
+			if processCenters == strings.Contains(d2graph.Key(obj.Attributes.NearKey)[0], "center") {
+				obj.TopLeft = geo.NewPoint(place(obj))
+			}
+		}
+		for _, obj := range constantNears {
+			if processCenters == strings.Contains(d2graph.Key(obj.Attributes.NearKey)[0], "center") {
+				// The z-index for constant nears does not matter, as it will not collide
+				g.Objects = append(g.Objects, obj)
+				obj.Parent.Children[obj.ID] = obj
+				obj.Parent.ChildrenArray = append(obj.Parent.ChildrenArray, obj)
+			}
+		}
+	}
+
+	// These shapes skipped core layout, which means they also skipped label placements
+	for _, obj := range constantNears {
+		if obj.Attributes.Shape.Value == d2target.ShapeImage {
+			obj.LabelPosition = go2.Pointer(string(label.OutsideBottomCenter))
+		} else if obj.Attributes.Icon != nil {
+			obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
+		} else {
+			obj.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))
+		}
+	}
+
+	return nil
+}
+
+// place returns the position of obj, taking into consideration its near value and the diagram
+func place(obj *d2graph.Object) (float64, float64) {
+	tl, br := boundingBox(obj.Graph)
+	w := br.X - tl.X
+	h := br.Y - tl.Y
+	switch d2graph.Key(obj.Attributes.NearKey)[0] {
+	case "top-left":
+		return tl.X - obj.Width - pad, tl.Y - obj.Height - pad
+	case "top-center":
+		return tl.X + w/2 - obj.Width/2, tl.Y - obj.Height - pad
+	case "top-right":
+		return br.X + pad, tl.Y - obj.Height - pad
+	case "center-left":
+		return tl.X - obj.Width - pad, tl.Y + h/2 - obj.Height/2
+	case "center-right":
+		return br.X + pad, tl.Y + h/2 - obj.Height/2
+	case "bottom-left":
+		return tl.X - obj.Width - pad, br.Y + pad
+	case "bottom-center":
+		return br.X - w/2 - obj.Width/2, br.Y + pad
+	case "bottom-right":
+		return br.X + pad, br.Y + pad
+	}
+	return 0, 0
+}
+
+// WithoutConstantNears plucks out the graph objects which have "near" set to a constant value
+// This is to be called before layout engines so they don't take part in regular positioning
+func WithoutConstantNears(ctx context.Context, g *d2graph.Graph) (nears []*d2graph.Object) {
+	for i := 0; i < len(g.Objects); i++ {
+		obj := g.Objects[i]
+		if obj.Attributes.NearKey == nil {
+			continue
+		}
+		_, isKey := g.Root.HasChild(d2graph.Key(obj.Attributes.NearKey))
+		if isKey {
+			continue
+		}
+		_, isConst := d2graph.NearConstants[d2graph.Key(obj.Attributes.NearKey)[0]]
+		if isConst {
+			nears = append(nears, obj)
+			g.Objects = append(g.Objects[:i], g.Objects[i+1:]...)
+			i--
+			delete(obj.Parent.Children, obj.ID)
+			for i := 0; i < len(obj.Parent.ChildrenArray); i++ {
+				if obj.Parent.ChildrenArray[i] == obj {
+					obj.Parent.ChildrenArray = append(obj.Parent.ChildrenArray[:i], obj.Parent.ChildrenArray[i+1:]...)
+					break
+				}
+			}
+		}
+	}
+	return nears
+}
+
+// boundingBox gets the center of the graph as defined by shapes
+// The bounds taking into consideration only shapes gives more of a feeling of true center
+// It differs from d2target.BoundingBox which needs to include every visible thing
+func boundingBox(g *d2graph.Graph) (tl, br *geo.Point) {
+	if len(g.Objects) == 0 {
+		return geo.NewPoint(0, 0), geo.NewPoint(0, 0)
+	}
+	x1 := math.Inf(1)
+	y1 := math.Inf(1)
+	x2 := math.Inf(-1)
+	y2 := math.Inf(-1)
+
+	for _, obj := range g.Objects {
+		if obj.Attributes.NearKey != nil {
+			// Top left should not be MORE top than top-center
+			// But it should go more left if top-center label extends beyond bounds of diagram
+			switch d2graph.Key(obj.Attributes.NearKey)[0] {
+			case "top-center", "bottom-center":
+				x1 = math.Min(x1, obj.TopLeft.X)
+				x2 = math.Max(x2, obj.TopLeft.X+obj.Width)
+			case "center-left", "center-right":
+				y1 = math.Min(y1, obj.TopLeft.Y)
+				y2 = math.Max(y2, obj.TopLeft.Y+obj.Height)
+			}
+		} else {
+			x1 = math.Min(x1, obj.TopLeft.X)
+			y1 = math.Min(y1, obj.TopLeft.Y)
+			x2 = math.Max(x2, obj.TopLeft.X+obj.Width)
+			y2 = math.Max(y2, obj.TopLeft.Y+obj.Height)
+		}
+	}
+
+	return geo.NewPoint(x1, y1), geo.NewPoint(x2, y2)
+}
--- a/d2layouts/d2sequence/layout.go
+++ b/d2layouts/d2sequence/layout.go
@ -69,6 +69,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, layout func(ctx context.Conte
 	layoutEdges, edgeOrder := getLayoutEdges(g, edgesToRemove)
 	g.Edges = layoutEdges
 	layoutObjects, objectOrder := getLayoutObjects(g, objectsToRemove)
+	// TODO this isn't a proper deletion because the objects still appear as children of the object
 	g.Objects = layoutObjects

 	if g.Root.IsSequenceDiagram() {
--- a/d2layouts/d2sequence/sequence_diagram.go
+++ b/d2layouts/d2sequence/sequence_diagram.go
@ -74,6 +74,7 @@ func newSequenceDiagram(objects []*d2graph.Object, messages []*d2graph.Edge) *se
 			// Groups may have more nested groups
 			for len(queue) > 0 {
 				curr := queue[0]
+				curr.LabelPosition = go2.Pointer(string(label.InsideTopLeft))
 				groups = append(groups, curr)
 				queue = queue[1:]
 				queue = append(queue, curr.ChildrenArray...)
--- a/d2lib/d2.go
+++ b/d2lib/d2.go
@ -9,6 +9,7 @@ import (
 	"oss.terrastruct.com/d2/d2compiler"
 	"oss.terrastruct.com/d2/d2exporter"
 	"oss.terrastruct.com/d2/d2graph"
+	"oss.terrastruct.com/d2/d2layouts/d2near"
 	"oss.terrastruct.com/d2/d2layouts/d2sequence"
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 	"oss.terrastruct.com/d2/d2target"
@ -48,9 +49,20 @@ func Compile(ctx context.Context, input string, opts *CompileOptions) (*d2target
 			return nil, nil, err
 		}

-		if layout, err := getLayout(opts); err != nil {
+		coreLayout, err := getLayout(opts)
+		if err != nil {
 			return nil, nil, err
-		} else if err := d2sequence.Layout(ctx, g, layout); err != nil {
+		}
+
+		constantNears := d2near.WithoutConstantNears(ctx, g)
+
+		err = d2sequence.Layout(ctx, g, coreLayout)
+		if err != nil {
+			return nil, nil, err
+		}
+
+		err = d2near.Layout(ctx, g, constantNears)
+		if err != nil {
 			return nil, nil, err
 		}
 	}
--- a/d2renderers/d2sketch/sketch.go
+++ b/d2renderers/d2sketch/sketch.go
@ -3,13 +3,17 @@ package d2sketch
 import (
 	"encoding/json"
 	"fmt"
+	"strings"

 	_ "embed"

 	"github.com/dop251/goja"

 	"oss.terrastruct.com/d2/d2target"
+	"oss.terrastruct.com/d2/lib/geo"
+	"oss.terrastruct.com/d2/lib/label"
 	"oss.terrastruct.com/d2/lib/svg"
+	"oss.terrastruct.com/util-go/go2"
 )

 //go:embed fillpattern.svg
@ -62,8 +66,13 @@ func DefineFillPattern() string {
 func shapeStyle(shape d2target.Shape) string {
 	out := ""

-	out += fmt.Sprintf(`fill:%s;`, shape.Fill)
-	out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
+	if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
+		out += fmt.Sprintf(`fill:%s;`, shape.Stroke)
+		out += fmt.Sprintf(`stroke:%s;`, shape.Fill)
+	} else {
+		out += fmt.Sprintf(`fill:%s;`, shape.Fill)
+		out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
+	}
 	out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
 	out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
 	if shape.StrokeDash != 0 {
@ -81,10 +90,7 @@ func Rect(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	if _, err := r.run(js); err != nil {
-		return "", err
-	}
-	paths, err := extractPaths(r)
+	paths, err := computeRoughPaths(r, js)
 	if err != nil {
 		return "", err
 	}
@ -109,10 +115,7 @@ func Oval(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	if _, err := r.run(js); err != nil {
-		return "", err
-	}
-	paths, err := extractPaths(r)
+	paths, err := computeRoughPaths(r, js)
 	if err != nil {
 		return "", err
 	}
@ -140,10 +143,7 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, path, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-		if _, err := r.run(js); err != nil {
-			return "", err
-		}
-		sketchPaths, err := extractPaths(r)
+		sketchPaths, err := computeRoughPaths(r, js)
 		if err != nil {
 			return "", err
 		}
@ -180,10 +180,7 @@ func connectionStyle(connection d2target.Connection) string {
 func Connection(r *Runner, connection d2target.Connection, path, attrs string) (string, error) {
 	roughness := 1.0
 	js := fmt.Sprintf(`node = rc.path("%s", {roughness: %f, seed: 1});`, path, roughness)
-	if _, err := r.run(js); err != nil {
-		return "", err
-	}
-	paths, err := extractPaths(r)
+	paths, err := computeRoughPaths(r, js)
 	if err != nil {
 		return "", err
 	}
@ -197,6 +194,280 @@ func Connection(r *Runner, connection d2target.Connection, path, attrs string) (
 	return output, nil
 }

+// TODO cleanup
+func Table(r *Runner, shape d2target.Shape) (string, error) {
+	output := ""
+	js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
+		fill: "%s",
+		stroke: "%s",
+		strokeWidth: %d,
+		%s
+	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	paths, err := computeRoughPaths(r, js)
+	if err != nil {
+		return "", err
+	}
+	for _, p := range paths {
+		output += fmt.Sprintf(
+			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+			shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
+		)
+	}
+
+	box := geo.NewBox(
+		geo.NewPoint(float64(shape.Pos.X), float64(shape.Pos.Y)),
+		float64(shape.Width),
+		float64(shape.Height),
+	)
+	rowHeight := box.Height / float64(1+len(shape.SQLTable.Columns))
+	headerBox := geo.NewBox(box.TopLeft, box.Width, rowHeight)
+
+	js = fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %f, {
+		fill: "%s",
+		%s
+	});`, shape.Width, rowHeight, shape.Fill, baseRoughProps)
+	paths, err = computeRoughPaths(r, js)
+	if err != nil {
+		return "", err
+	}
+	for _, p := range paths {
+		output += fmt.Sprintf(
+			`<path class="class_header" transform="translate(%d %d)" d="%s" style="fill:%s" />`,
+			shape.Pos.X, shape.Pos.Y, p, shape.Fill,
+		)
+	}
+
+	if shape.Label != "" {
+		tl := label.InsideMiddleLeft.GetPointOnBox(
+			headerBox,
+			20,
+			float64(shape.LabelWidth),
+			float64(shape.LabelHeight),
+		)
+
+		output += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
+			"text",
+			tl.X,
+			tl.Y+float64(shape.LabelHeight)*3/4,
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
+				"start",
+				4+shape.FontSize,
+				shape.Stroke,
+			),
+			svg.EscapeText(shape.Label),
+		)
+	}
+
+	var longestNameWidth int
+	for _, f := range shape.Columns {
+		longestNameWidth = go2.Max(longestNameWidth, f.Name.LabelWidth)
+	}
+
+	rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
+	rowBox.TopLeft.Y += headerBox.Height
+	for _, f := range shape.Columns {
+		nameTL := label.InsideMiddleLeft.GetPointOnBox(
+			rowBox,
+			d2target.NamePadding,
+			rowBox.Width,
+			float64(shape.FontSize),
+		)
+		constraintTR := label.InsideMiddleRight.GetPointOnBox(
+			rowBox,
+			d2target.TypePadding,
+			0,
+			float64(shape.FontSize),
+		)
+
+		output += strings.Join([]string{
+			fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+				nameTL.X,
+				nameTL.Y+float64(shape.FontSize)*3/4,
+				fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), shape.PrimaryAccentColor),
+				svg.EscapeText(f.Name.Label),
+			),
+			fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+				nameTL.X+float64(longestNameWidth)+2*d2target.NamePadding,
+				nameTL.Y+float64(shape.FontSize)*3/4,
+				fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), shape.NeutralAccentColor),
+				svg.EscapeText(f.Type.Label),
+			),
+			fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+				constraintTR.X,
+				constraintTR.Y+float64(shape.FontSize)*3/4,
+				fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", float64(shape.FontSize), shape.SecondaryAccentColor),
+				f.ConstraintAbbr(),
+			),
+		}, "\n")
+
+		rowBox.TopLeft.Y += rowHeight
+
+		js = fmt.Sprintf(`node = rc.line(%f, %f, %f, %f, {
+		%s
+	});`, rowBox.TopLeft.X, rowBox.TopLeft.Y, rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y, baseRoughProps)
+		paths, err = computeRoughPaths(r, js)
+		if err != nil {
+			return "", err
+		}
+		for _, p := range paths {
+			output += fmt.Sprintf(
+				`<path d="%s" style="fill:%s" />`,
+				p, shape.Fill,
+			)
+		}
+	}
+	output += fmt.Sprintf(
+		`<rect class="sketch-overlay" transform="translate(%d %d)" width="%d" height="%d" />`,
+		shape.Pos.X, shape.Pos.Y, shape.Width, shape.Height,
+	)
+	return output, nil
+}
+
+func Class(r *Runner, shape d2target.Shape) (string, error) {
+	output := ""
+	js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
+		fill: "%s",
+		stroke: "%s",
+		strokeWidth: %d,
+		%s
+	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	paths, err := computeRoughPaths(r, js)
+	if err != nil {
+		return "", err
+	}
+	for _, p := range paths {
+		output += fmt.Sprintf(
+			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+			shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
+		)
+	}
+
+	box := geo.NewBox(
+		geo.NewPoint(float64(shape.Pos.X), float64(shape.Pos.Y)),
+		float64(shape.Width),
+		float64(shape.Height),
+	)
+
+	rowHeight := box.Height / float64(2+len(shape.Class.Fields)+len(shape.Class.Methods))
+	headerBox := geo.NewBox(box.TopLeft, box.Width, 2*rowHeight)
+
+	js = fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %f, {
+		fill: "%s",
+		%s
+	});`, shape.Width, headerBox.Height, shape.Fill, baseRoughProps)
+	paths, err = computeRoughPaths(r, js)
+	if err != nil {
+		return "", err
+	}
+	for _, p := range paths {
+		output += fmt.Sprintf(
+			`<path class="class_header" transform="translate(%d %d)" d="%s" style="fill:%s" />`,
+			shape.Pos.X, shape.Pos.Y, p, shape.Fill,
+		)
+	}
+
+	output += fmt.Sprintf(
+		`<rect class="sketch-overlay" transform="translate(%d %d)" width="%d" height="%f" />`,
+		shape.Pos.X, shape.Pos.Y, shape.Width, headerBox.Height,
+	)
+
+	if shape.Label != "" {
+		tl := label.InsideMiddleCenter.GetPointOnBox(
+			headerBox,
+			0,
+			float64(shape.LabelWidth),
+			float64(shape.LabelHeight),
+		)
+
+		output += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
+			"text-mono",
+			tl.X+float64(shape.LabelWidth)/2,
+			tl.Y+float64(shape.LabelHeight)*3/4,
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
+				"middle",
+				4+shape.FontSize,
+				shape.Stroke,
+			),
+			svg.EscapeText(shape.Label),
+		)
+	}
+
+	rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
+	rowBox.TopLeft.Y += headerBox.Height
+	for _, f := range shape.Fields {
+		output += classRow(shape, rowBox, f.VisibilityToken(), f.Name, f.Type, float64(shape.FontSize))
+		rowBox.TopLeft.Y += rowHeight
+	}
+
+	js = fmt.Sprintf(`node = rc.line(%f, %f, %f, %f, {
+%s
+	});`, rowBox.TopLeft.X, rowBox.TopLeft.Y, rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y, baseRoughProps)
+	paths, err = computeRoughPaths(r, js)
+	if err != nil {
+		return "", err
+	}
+	for _, p := range paths {
+		output += fmt.Sprintf(
+			`<path class="class_header" d="%s" style="fill:%s" />`,
+			p, shape.Fill,
+		)
+	}
+
+	for _, m := range shape.Methods {
+		output += classRow(shape, rowBox, m.VisibilityToken(), m.Name, m.Return, float64(shape.FontSize))
+		rowBox.TopLeft.Y += rowHeight
+	}
+
+	return output, nil
+}
+
+func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText string, fontSize float64) string {
+	output := ""
+	prefixTL := label.InsideMiddleLeft.GetPointOnBox(
+		box,
+		d2target.PrefixPadding,
+		box.Width,
+		fontSize,
+	)
+	typeTR := label.InsideMiddleRight.GetPointOnBox(
+		box,
+		d2target.TypePadding,
+		0,
+		fontSize,
+	)
+
+	output += strings.Join([]string{
+		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+			prefixTL.X,
+			prefixTL.Y+fontSize*3/4,
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
+			prefix,
+		),
+
+		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+			prefixTL.X+d2target.PrefixWidth,
+			prefixTL.Y+fontSize*3/4,
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill),
+			svg.EscapeText(nameText),
+		),
+
+		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+			typeTR.X,
+			typeTR.Y+fontSize*3/4,
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;", "end", fontSize, shape.SecondaryAccentColor),
+			svg.EscapeText(typeText),
+		),
+	}, "\n")
+	return output
+}
+
+func computeRoughPaths(r *Runner, js string) ([]string, error) {
+	if _, err := r.run(js); err != nil {
+		return nil, err
+	}
+	return extractPaths(r)
+}
+
 type attrs struct {
 	D string `json:"d"`
 }
--- a/d2renderers/d2sketch/sketch_test.go
+++ b/d2renderers/d2sketch/sketch_test.go
@ -223,6 +223,58 @@ queue -> package -> step
 callout -> stored_data -> person
 diamond -> oval -> circle
 hexagon -> cloud
+`,
+		},
+		{
+			name: "sql_tables",
+			script: `users: {
+	shape: sql_table
+	id: int
+	name: string
+	email: string
+	password: string
+	last_login: datetime
+}
+
+products: {
+	shape: sql_table
+	id: int
+	price: decimal
+	sku: string
+	name: string
+}
+
+orders: {
+	shape: sql_table
+	id: int
+	user_id: int
+	product_id: int
+}
+
+shipments: {
+	shape: sql_table
+	id: int
+	order_id: int
+	tracking_number: string {constraint: primary_key}
+	status: string
+}
+
+users.id <-> orders.user_id
+products.id <-> orders.product_id
+shipments.order_id <-> orders.id`,
+		},
+		{
+			name: "class",
+			script: `manager: BatchManager {
+  shape: class
+  -num: int
+  -timeout: int
+  -pid
+
+  +getStatus(): Enum
+  +getJobs(): "Job[]"
+  +setTimeout(seconds int)
+}
 `,
 		},
 	}
--- a/d2renderers/d2sketch/testdata/class/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/class/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
--- a/d2renderers/d2svg/class.go
+++ b/d2renderers/d2svg/class.go
@ -8,11 +8,12 @@ import (
 	"oss.terrastruct.com/d2/d2target"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
+	"oss.terrastruct.com/d2/lib/svg"
 )

-func classHeader(box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
-	str := fmt.Sprintf(`<rect class="class_header" x="%f" y="%f" width="%f" height="%f" fill="black" />`,
-		box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height)
+func classHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
+	str := fmt.Sprintf(`<rect class="class_header" x="%f" y="%f" width="%f" height="%f" fill="%s" />`,
+		box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height, shape.Fill)

 	if text != "" {
 		tl := label.InsideMiddleCenter.GetPointOnBox(
@ -23,79 +24,60 @@ func classHeader(box *geo.Box, text string, textWidth, textHeight, fontSize floa
 		)

 		str += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
-			// TODO use monospace font
-			"text",
+			"text-mono",
 			tl.X+textWidth/2,
 			tl.Y+textHeight*3/4,
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
+			fmt.Sprintf(`text-anchor:%s;font-size:%vpx;fill:%s`,
 				"middle",
 				4+fontSize,
-				"white",
+				shape.Stroke,
 			),
-			escapeText(text),
+			svg.EscapeText(text),
 		)
 	}
 	return str
 }

-const (
-	prefixPadding = 10
-	prefixWidth   = 20
-	typePadding   = 20
-)
-
-func classRow(box *geo.Box, prefix, nameText, typeText string, fontSize float64) string {
+func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText string, fontSize float64) string {
 	// Row is made up of prefix, name, and type
 	// e.g. | + firstName   string  |
 	prefixTL := label.InsideMiddleLeft.GetPointOnBox(
 		box,
-		prefixPadding,
+		d2target.PrefixPadding,
 		box.Width,
 		fontSize,
 	)
 	typeTR := label.InsideMiddleRight.GetPointOnBox(
 		box,
-		typePadding,
+		d2target.TypePadding,
 		0,
 		fontSize,
 	)
-	accentColor := "rgb(13, 50, 178)"

 	return strings.Join([]string{
-		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
 			prefixTL.X,
 			prefixTL.Y+fontSize*3/4,
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, accentColor),
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
 			prefix,
 		),

-		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
-			prefixTL.X+prefixWidth,
+		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+			prefixTL.X+d2target.PrefixWidth,
 			prefixTL.Y+fontSize*3/4,
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, "black"),
-			escapeText(nameText),
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill),
+			svg.EscapeText(nameText),
 		),

-		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
 			typeTR.X,
 			typeTR.Y+fontSize*3/4,
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "end", fontSize, accentColor),
-			escapeText(typeText),
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "end", fontSize, shape.SecondaryAccentColor),
+			svg.EscapeText(typeText),
 		),
 	}, "\n")
 }

-func visibilityToken(visibility string) string {
-	switch visibility {
-	case "protected":
-		return "#"
-	case "private":
-		return "-"
-	default:
-		return "+"
-	}
-}
-
 func drawClass(writer io.Writer, targetShape d2target.Shape) {
 	fmt.Fprintf(writer, `<rect class="shape" x="%d" y="%d" width="%d" height="%d" style="%s"/>`,
 		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(targetShape))
@ -109,14 +91,14 @@ func drawClass(writer io.Writer, targetShape d2target.Shape) {
 	headerBox := geo.NewBox(box.TopLeft, box.Width, 2*rowHeight)

 	fmt.Fprint(writer,
-		classHeader(headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
+		classHeader(targetShape, headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
 	)

 	rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
 	rowBox.TopLeft.Y += headerBox.Height
-	for _, f := range targetShape.Class.Fields {
+	for _, f := range targetShape.Fields {
 		fmt.Fprint(writer,
-			classRow(rowBox, visibilityToken(f.Visibility), f.Name, f.Type, float64(targetShape.FontSize)),
+			classRow(targetShape, rowBox, f.VisibilityToken(), f.Name, f.Type, float64(targetShape.FontSize)),
 		)
 		rowBox.TopLeft.Y += rowHeight
 	}
@ -124,11 +106,11 @@ func drawClass(writer io.Writer, targetShape d2target.Shape) {
 	fmt.Fprintf(writer, `<line x1="%f" y1="%f" x2="%f" y2="%f" style="%s" />`,
 		rowBox.TopLeft.X, rowBox.TopLeft.Y,
 		rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y,
-		fmt.Sprintf("stroke-width:1;stroke:%v", targetShape.Stroke))
+		fmt.Sprintf("stroke-width:1;stroke:%v", targetShape.Fill))

-	for _, m := range targetShape.Class.Methods {
+	for _, m := range targetShape.Methods {
 		fmt.Fprint(writer,
-			classRow(rowBox, visibilityToken(m.Visibility), m.Name, m.Return, float64(targetShape.FontSize)),
+			classRow(targetShape, rowBox, m.VisibilityToken(), m.Name, m.Return, float64(targetShape.FontSize)),
 		)
 		rowBox.TopLeft.Y += rowHeight
 	}
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@ -5,10 +5,10 @@ package d2svg
 import (
 	"bytes"
 	_ "embed"
-	"encoding/xml"
 	"errors"
 	"fmt"
 	"hash/fnv"
+	"html"
 	"io"
 	"sort"
 	"strings"
@ -357,7 +357,7 @@ func makeLabelMask(labelTL *geo.Point, width, height int) string {
 }

 func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, _ error) {
-	fmt.Fprintf(writer, `<g id="%s">`, escapeText(connection.ID))
+	fmt.Fprintf(writer, `<g id="%s">`, svg.EscapeText(connection.ID))
 	var markerStart string
 	if connection.SrcArrow != d2target.NoArrowhead {
 		id := arrowheadMarkerID(false, connection)
@ -536,7 +536,7 @@ func render3dRect(targetShape d2target.Shape) string {
 		strings.Join(borderSegments, " "), borderStyle)

 	// create mask from border stroke, to cut away from the shape fills
-	maskID := fmt.Sprintf("border-mask-%v", escapeText(targetShape.ID))
+	maskID := fmt.Sprintf("border-mask-%v", svg.EscapeText(targetShape.ID))
 	borderMask := strings.Join([]string{
 		fmt.Sprintf(`<defs><mask id="%s" maskUnits="userSpaceOnUse" x="%d" y="%d" width="%d" height="%d">`,
 			maskID, targetShape.Pos.X, targetShape.Pos.Y-threeDeeOffset, targetShape.Width+threeDeeOffset, targetShape.Height+threeDeeOffset,
@ -583,7 +583,7 @@ func render3dRect(targetShape d2target.Shape) string {
 }

 func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, err error) {
-	fmt.Fprintf(writer, `<g id="%s">`, escapeText(targetShape.ID))
+	fmt.Fprintf(writer, `<g id="%s">`, svg.EscapeText(targetShape.ID))
 	tl := geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y))
 	width := float64(targetShape.Width)
 	height := float64(targetShape.Height)
@ -618,11 +618,27 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske

 	switch targetShape.Type {
 	case d2target.ShapeClass:
-		drawClass(writer, targetShape)
+		if sketchRunner != nil {
+			out, err := d2sketch.Class(sketchRunner, targetShape)
+			if err != nil {
+				return "", err
+			}
+			fmt.Fprintf(writer, out)
+		} else {
+			drawClass(writer, targetShape)
+		}
 		fmt.Fprintf(writer, `</g></g>`)
 		return labelMask, nil
 	case d2target.ShapeSQLTable:
-		drawTable(writer, targetShape)
+		if sketchRunner != nil {
+			out, err := d2sketch.Table(sketchRunner, targetShape)
+			if err != nil {
+				return "", err
+			}
+			fmt.Fprintf(writer, out)
+		} else {
+			drawTable(writer, targetShape)
+		}
 		fmt.Fprintf(writer, `</g></g>`)
 		return labelMask, nil
 	case d2target.ShapeOval:
@ -641,7 +657,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske

 	case d2target.ShapeImage:
 		fmt.Fprintf(writer, `<image href="%s" x="%d" y="%d" width="%d" height="%d" style="%s" />`,
-			targetShape.Icon.String(),
+			html.EscapeString(targetShape.Icon.String()),
 			targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style)

 	// TODO should standardize "" to rectangle
@ -701,7 +717,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		tl := iconPosition.GetPointOnBox(box, label.PADDING, float64(iconSize), float64(iconSize))

 		fmt.Fprintf(writer, `<image href="%s" x="%f" y="%f" width="%d" height="%d" />`,
-			targetShape.Icon.String(),
+			html.EscapeString(targetShape.Icon.String()),
 			tl.X,
 			tl.Y,
 			iconSize,
@ -725,9 +741,11 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		} else if targetShape.Italic {
 			fontClass += "-italic"
 		}
+		if targetShape.Underline {
+			fontClass += " text-underline"
+		}

-		switch targetShape.Type {
-		case d2target.ShapeCode:
+		if targetShape.Type == d2target.ShapeCode {
 			lexer := lexers.Get(targetShape.Language)
 			if lexer == nil {
 				return labelMask, fmt.Errorf("code snippet lexer for %s not found", targetShape.Language)
@ -768,38 +786,36 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 				fmt.Fprint(writer, "</text>")
 			}
 			fmt.Fprintf(writer, "</g></g>")
-		case d2target.ShapeText:
-			if targetShape.Language == "latex" {
-				render, err := d2latex.Render(targetShape.Label)
-				if err != nil {
-					return labelMask, err
-				}
-				fmt.Fprintf(writer, `<g transform="translate(%f %f)" style="opacity:%f">`, box.TopLeft.X, box.TopLeft.Y, targetShape.Opacity)
-				fmt.Fprint(writer, render)
-				fmt.Fprintf(writer, "</g>")
-			} else {
-				render, err := textmeasure.RenderMarkdown(targetShape.Label)
-				if err != nil {
-					return labelMask, err
-				}
-				fmt.Fprintf(writer, `<g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="%f" y="%f" width="%d" height="%d">`,
-					box.TopLeft.X, box.TopLeft.Y, targetShape.Width, targetShape.Height,
-				)
-				// we need the self closing form in this svg/xhtml context
-				render = strings.ReplaceAll(render, "<hr>", "<hr />")
-
-				var mdStyle string
-				if targetShape.Fill != "" {
-					mdStyle = fmt.Sprintf("background-color:%s;", targetShape.Fill)
-				}
-				if targetShape.Stroke != "" {
-					mdStyle += fmt.Sprintf("color:%s;", targetShape.Stroke)
-				}
-
-				fmt.Fprintf(writer, `<div xmlns="http://www.w3.org/1999/xhtml" class="md" style="%s">%v</div>`, mdStyle, render)
-				fmt.Fprint(writer, `</foreignObject></g>`)
+		} else if targetShape.Type == d2target.ShapeText && targetShape.Language == "latex" {
+			render, err := d2latex.Render(targetShape.Label)
+			if err != nil {
+				return labelMask, err
 			}
-		default:
+			fmt.Fprintf(writer, `<g transform="translate(%f %f)" style="opacity:%f">`, box.TopLeft.X, box.TopLeft.Y, targetShape.Opacity)
+			fmt.Fprint(writer, render)
+			fmt.Fprintf(writer, "</g>")
+		} else if targetShape.Type == d2target.ShapeText && targetShape.Language != "" {
+			render, err := textmeasure.RenderMarkdown(targetShape.Label)
+			if err != nil {
+				return labelMask, err
+			}
+			fmt.Fprintf(writer, `<g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="%f" y="%f" width="%d" height="%d">`,
+				box.TopLeft.X, box.TopLeft.Y, targetShape.Width, targetShape.Height,
+			)
+			// we need the self closing form in this svg/xhtml context
+			render = strings.ReplaceAll(render, "<hr>", "<hr />")
+
+			var mdStyle string
+			if targetShape.Fill != "" {
+				mdStyle = fmt.Sprintf("background-color:%s;", targetShape.Fill)
+			}
+			if targetShape.Stroke != "" {
+				mdStyle += fmt.Sprintf("color:%s;", targetShape.Stroke)
+			}
+
+			fmt.Fprintf(writer, `<div xmlns="http://www.w3.org/1999/xhtml" class="md" style="%s">%v</div>`, mdStyle, render)
+			fmt.Fprint(writer, `</foreignObject></g>`)
+		} else {
 			fontColor := "black"
 			if targetShape.Color != "" {
 				fontColor = targetShape.Color
@ -823,15 +839,9 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 	return labelMask, nil
 }

-func escapeText(text string) string {
-	buf := new(bytes.Buffer)
-	_ = xml.EscapeText(buf, []byte(text))
-	return buf.String()
-}
-
 func renderText(text string, x, height float64) string {
 	if !strings.Contains(text, "\n") {
-		return escapeText(text)
+		return svg.EscapeText(text)
 	}
 	rendered := []string{}
 	lines := strings.Split(text, "\n")
@ -840,7 +850,7 @@ func renderText(text string, x, height float64) string {
 		if i == 0 {
 			dy = 0
 		}
-		escaped := escapeText(line)
+		escaped := svg.EscapeText(line)
 		if escaped == "" {
 			// if there are multiple newlines in a row we still need text for the tspan to render
 			escaped = " "
@ -853,8 +863,16 @@ func renderText(text string, x, height float64) string {
 func shapeStyle(shape d2target.Shape) string {
 	out := ""

-	out += fmt.Sprintf(`fill:%s;`, shape.Fill)
-	out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
+	if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
+		// Fill is used for header fill in these types
+		// This fill property is just background of rows
+		out += fmt.Sprintf(`fill:%s;`, shape.Stroke)
+		// Stroke (border) of these shapes should match the header fill
+		out += fmt.Sprintf(`stroke:%s;`, shape.Fill)
+	} else {
+		out += fmt.Sprintf(`fill:%s;`, shape.Fill)
+		out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
+	}
 	out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
 	out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
 	if shape.StrokeDash != 0 {
@ -885,6 +903,7 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {

 	triggers := []string{
 		`class="text"`,
+		`class="text `,
 		`class="md"`,
 	}

@ -903,6 +922,20 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
 		}
 	}

+	triggers = []string{
+		`text-underline`,
+	}
+
+	for _, t := range triggers {
+		if strings.Contains(content, t) {
+			buf.WriteString(`
+.text-underline {
+  text-decoration: underline;
+}`)
+			break
+		}
+	}
+
 	triggers = []string{
 		`class="text-bold"`,
 		`<b>`,
--- a/d2renderers/d2svg/github-markdown.css
+++ b/d2renderers/d2svg/github-markdown.css
@ -257,6 +257,7 @@
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
+  font-family: "font-regular";
 }

 .md h2 {
--- a/d2renderers/d2svg/table.go
+++ b/d2renderers/d2svg/table.go
@ -8,12 +8,13 @@ import (
 	"oss.terrastruct.com/d2/d2target"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
+	"oss.terrastruct.com/d2/lib/svg"
 	"oss.terrastruct.com/util-go/go2"
 )

-func tableHeader(box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
+func tableHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
 	str := fmt.Sprintf(`<rect class="class_header" x="%f" y="%f" width="%f" height="%f" fill="%s" />`,
-		box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height, "#0a0f25")
+		box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height, shape.Fill)

 	if text != "" {
 		tl := label.InsideMiddleLeft.GetPointOnBox(
@ -30,15 +31,15 @@ func tableHeader(box *geo.Box, text string, textWidth, textHeight, fontSize floa
 			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
 				"start",
 				4+fontSize,
-				"white",
+				shape.Stroke,
 			),
-			escapeText(text),
+			svg.EscapeText(text),
 		)
 	}
 	return str
 }

-func tableRow(box *geo.Box, nameText, typeText, constraintText string, fontSize, longestNameWidth float64) string {
+func tableRow(shape d2target.Shape, box *geo.Box, nameText, typeText, constraintText string, fontSize, longestNameWidth float64) string {
 	// Row is made up of name, type, and constraint
 	// e.g. | diagram   int   FK |
 	nameTL := label.InsideMiddleLeft.GetPointOnBox(
@ -54,49 +55,30 @@ func tableRow(box *geo.Box, nameText, typeText, constraintText string, fontSize,
 		fontSize,
 	)

-	// TODO theme based
-	primaryColor := "rgb(13, 50, 178)"
-	accentColor := "rgb(74, 111, 243)"
-	neutralColor := "rgb(103, 108, 126)"
-
 	return strings.Join([]string{
 		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
 			nameTL.X,
 			nameTL.Y+fontSize*3/4,
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, primaryColor),
-			escapeText(nameText),
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
+			svg.EscapeText(nameText),
 		),

-		// TODO light font
 		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
 			nameTL.X+longestNameWidth+2*d2target.NamePadding,
 			nameTL.Y+fontSize*3/4,
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, neutralColor),
-			escapeText(typeText),
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.NeutralAccentColor),
+			svg.EscapeText(typeText),
 		),

 		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
 			constraintTR.X,
 			constraintTR.Y+fontSize*3/4,
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", fontSize, accentColor),
+			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", fontSize, shape.SecondaryAccentColor),
 			constraintText,
 		),
 	}, "\n")
 }

-func constraintAbbr(constraint string) string {
-	switch constraint {
-	case "primary_key":
-		return "PK"
-	case "foreign_key":
-		return "FK"
-	case "unique":
-		return "UNQ"
-	default:
-		return ""
-	}
-}
-
 func drawTable(writer io.Writer, targetShape d2target.Shape) {
 	fmt.Fprintf(writer, `<rect class="shape" x="%d" y="%d" width="%d" height="%d" style="%s"/>`,
 		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(targetShape))
@ -110,24 +92,26 @@ func drawTable(writer io.Writer, targetShape d2target.Shape) {
 	headerBox := geo.NewBox(box.TopLeft, box.Width, rowHeight)

 	fmt.Fprint(writer,
-		tableHeader(headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
+		tableHeader(targetShape, headerBox, targetShape.Label,
+			float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
 	)

 	var longestNameWidth int
-	for _, f := range targetShape.SQLTable.Columns {
+	for _, f := range targetShape.Columns {
 		longestNameWidth = go2.Max(longestNameWidth, f.Name.LabelWidth)
 	}

 	rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
 	rowBox.TopLeft.Y += headerBox.Height
-	for _, f := range targetShape.SQLTable.Columns {
+	for _, f := range targetShape.Columns {
 		fmt.Fprint(writer,
-			tableRow(rowBox, f.Name.Label, f.Type.Label, constraintAbbr(f.Constraint), float64(targetShape.FontSize), float64(longestNameWidth)),
+			tableRow(targetShape, rowBox, f.Name.Label, f.Type.Label, f.ConstraintAbbr(), float64(targetShape.FontSize), float64(longestNameWidth)),
 		)
 		rowBox.TopLeft.Y += rowHeight
-		fmt.Fprintf(writer, `<line x1="%f" y1="%f" x2="%f" y2="%f" style="stroke-width:2;stroke:#0a0f25" />`,
+		fmt.Fprintf(writer, `<line x1="%f" y1="%f" x2="%f" y2="%f" style="stroke-width:2;stroke:%s" />`,
 			rowBox.TopLeft.X, rowBox.TopLeft.Y,
 			rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y,
+			targetShape.Fill,
 		)
 	}
 }
--- a/d2target/class.go
+++ b/d2target/class.go
@ -6,6 +6,11 @@ import (
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 )

+const (
+	PrefixPadding = 10
+	PrefixWidth   = 20
+)
+
 type Class struct {
 	Fields  []ClassField  `json:"fields"`
 	Methods []ClassMethod `json:"methods"`
@ -27,6 +32,17 @@ func (cf ClassField) Text() *MText {
 	}
 }

+func (cf ClassField) VisibilityToken() string {
+	switch cf.Visibility {
+	case "protected":
+		return "#"
+	case "private":
+		return "-"
+	default:
+		return "+"
+	}
+}
+
 type ClassMethod struct {
 	Name       string `json:"name"`
 	Return     string `json:"return"`
@ -42,3 +58,14 @@ func (cm ClassMethod) Text() *MText {
 		Shape:    "class",
 	}
 }
+
+func (cm ClassMethod) VisibilityToken() string {
+	switch cm.Visibility {
+	case "protected":
+		return "#"
+	case "private":
+		return "-"
+	default:
+		return "+"
+	}
+}
--- a/d2target/d2target.go
+++ b/d2target/d2target.go
@ -146,6 +146,11 @@ type Shape struct {

 	ZIndex int `json:"zIndex"`
 	Level  int `json:"level"`
+
+	// These are used for special shapes, sql_table and class
+	PrimaryAccentColor   string `json:"primaryAccentColor,omitempty"`
+	SecondaryAccentColor string `json:"secondaryAccentColor,omitempty"`
+	NeutralAccentColor   string `json:"neutralAccentColor,omitempty"`
 }

 func (s *Shape) SetType(t string) {
--- a/d2target/sqltable.go
+++ b/d2target/sqltable.go
@ -1,10 +1,6 @@
 package d2target

-import (
-	"fmt"
-
-	"oss.terrastruct.com/d2/d2renderers/d2fonts"
-)
+import "oss.terrastruct.com/d2/d2renderers/d2fonts"

 const (
 	NamePadding = 10
@ -22,12 +18,34 @@ type SQLColumn struct {
 	Reference  string `json:"reference"`
 }

-func (c SQLColumn) Text() *MText {
-	return &MText{
-		Text:     fmt.Sprintf("%s%s%s%s", c.Name.Label, c.Type.Label, c.Constraint, c.Reference),
-		FontSize: d2fonts.FONT_SIZE_L,
-		IsBold:   false,
-		IsItalic: false,
-		Shape:    "sql_table",
+func (c SQLColumn) Texts() []*MText {
+	return []*MText{
+		{
+			Text:     c.Name.Label,
+			FontSize: d2fonts.FONT_SIZE_L,
+			IsBold:   false,
+			IsItalic: false,
+			Shape:    "sql_table",
+		},
+		{
+			Text:     c.Type.Label,
+			FontSize: d2fonts.FONT_SIZE_L,
+			IsBold:   false,
+			IsItalic: false,
+			Shape:    "sql_table",
+		},
+	}
+}
+
+func (c SQLColumn) ConstraintAbbr() string {
+	switch c.Constraint {
+	case "primary_key":
+		return "PK"
+	case "foreign_key":
+		return "FK"
+	case "unique":
+		return "UNQ"
+	default:
+		return ""
 	}
 }
--- a/e2etests/e2e_test.go
+++ b/e2etests/e2e_test.go
@ -139,6 +139,7 @@ func run(t *testing.T, tc testCase) {
 			defer os.Remove(pathGotSVG)
 		}

+		// Check that it's valid SVG
 		var xmlParsed interface{}
 		err = xml.Unmarshal(svgBytes, &xmlParsed)
 		assert.Success(t, err)
--- a/e2etests/regression_test.go
+++ b/e2etests/regression_test.go
@ -171,6 +171,50 @@ build_workflow: lambda-build.yaml {
 	S3 <-> Terraform: Pulls zip to deploy
 	Terraform -> AWS: Changes the live lambdas
 }
+`,
+		},
+		{
+			name: "query_param_escape",
+			script: `my network: {
+  icon: https://icons.terrastruct.com/infra/019-network.svg?fuga=1&hoge
+}
+`,
+		},
+		{
+			name: "elk_order",
+			script: `queue: {
+  shape: queue
+  label: ''
+
+  M0
+  M1
+  M2
+  M3
+  M4
+  M5
+  M6
+}
+
+m0_desc: |md
+  Oldest message
+|
+m0_desc -> queue.M0
+
+m2_desc: |md
+  Offset
+|
+m2_desc -> queue.M2
+
+m5_desc: |md
+  Last message
+|
+m5_desc -> queue.M5
+
+m6_desc: |md
+  Next message will be\
+  inserted here
+|
+m6_desc -> queue.M6
 `,
 		},
 	}
--- a/e2etests/stable_test.go
+++ b/e2etests/stable_test.go
@ -840,7 +840,7 @@ a -> md -> b
 	name: string
 	email: string
 	password: string
-	last_login: datetime
+	last_login: datetime { constraint: primary_key }
 }

 products: {
@ -1585,6 +1585,45 @@ container: {
 		label: to right container root
 	}
 }
+`,
+		},
+		{
+			name: "constant_near_stress",
+			script: `x -> y
+The top of the mountain: { shape: text; near: top-center }
+Joe: { shape: person; near: center-left }
+Donald: { shape: person; near: center-right }
+bottom: |md
+	# Cats, no less liquid than their shadows, offer no angles to the wind.
+
+  If we can't fix it, it ain't broke.
+
+  Dieters live life in the fasting lane.
+| { near: bottom-center }
+i am top left: { shape: text; near: top-left }
+i am top right: { shape: text; near: top-right }
+i am bottom left: { shape: text; near: bottom-left }
+i am bottom right: { shape: text; near: bottom-right }
+`,
+		},
+		{
+			name: "constant_near_title",
+			script: `title: |md
+  # A winning strategy
+| { near: top-center }
+
+poll the people -> results
+results -> unfavorable -> poll the people
+results -> favorable -> will of the people
+`,
+		},
+		{
+			name: "text_font_sizes",
+			script: `bear: { shape: text; style.font-size: 22; style.bold: true }
+mama bear: { shape: text; style.font-size: 28; style.italic: true }
+papa bear: { shape: text; style.font-size: 32; style.underline: true }
+mama bear -> bear
+papa bear -> bear
 `,
 		},
 	}
--- a/e2etests/testdata/regression/dagre_special_ids/elk/board.exp.json
+++ b/e2etests/testdata/regression/dagre_special_ids/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "\"ninety\\nnine\"",
      "type": "",
      "pos": {
-        "x": 714,
+        "x": 12,
        "y": 12
      },
      "width": 151,
@ -46,7 +46,7 @@
      "id": "eighty\reight",
      "type": "",
      "pos": {
-        "x": 194,
+        "x": 183,
        "y": 20
      },
      "width": 151,
@ -86,7 +86,7 @@
      "id": "\"seventy\r\\nseven\"",
      "type": "",
      "pos": {
-        "x": 12,
+        "x": 354,
        "y": 12
      },
      "width": 162,
@ -126,7 +126,7 @@
      "id": "\"a\\\\yode\"",
      "type": "",
      "pos": {
-        "x": 885,
+        "x": 536,
        "y": 28
      },
      "width": 154,
@ -166,7 +166,7 @@
      "id": "there",
      "type": "",
      "pos": {
-        "x": 546,
+        "x": 715,
        "y": 254
      },
      "width": 143,
@ -206,7 +206,7 @@
      "id": "'a\\\"ode'",
      "type": "",
      "pos": {
-        "x": 540,
+        "x": 710,
        "y": 28
      },
      "width": 154,
@ -246,7 +246,7 @@
      "id": "\"a\\\\node\"",
      "type": "",
      "pos": {
-        "x": 365,
+        "x": 884,
        "y": 28
      },
      "width": 155,
@ -310,19 +310,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 962,
+          "x": 613,
          "y": 154
        },
        {
-          "x": 962,
+          "x": 613,
          "y": 204
        },
        {
-          "x": 652.75,
+          "x": 751.25,
          "y": 204
        },
        {
-          "x": 652.75,
+          "x": 751.25,
          "y": 254
        }
      ],
@ -357,11 +357,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 617,
+          "x": 787,
          "y": 154
        },
        {
-          "x": 617,
+          "x": 787,
          "y": 254
        }
      ],
@ -396,19 +396,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 442.5,
+          "x": 961.5,
          "y": 154
        },
        {
-          "x": 442.5,
+          "x": 961.5,
          "y": 204
        },
        {
-          "x": 581.25,
+          "x": 822.75,
          "y": 204
        },
        {
-          "x": 581.25,
+          "x": 822.75,
          "y": 254
        }
      ],
--- a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
@ -18,7 +18,7 @@ width="1227" height="568" viewBox="-88 -88 1227 568"><style type="text/css">
 }

 ]]>
-</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="714" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="789.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="789.500000" dy="0.000000">ninety</tspan><tspan x="789.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="194" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="269.500000" y="86.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="12" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="93.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="93.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="93.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="885" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="962.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="546" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="617.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="540" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="617.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="365" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="442.500000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 962.000000 156.000000 L 962.000000 194.000000 S 962.000000 204.000000 952.000000 204.000000 L 662.750000 204.000000 S 652.750000 204.000000 652.750000 214.000000 L 652.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 617.000000 156.000000 L 617.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 442.500000 156.000000 L 442.500000 194.000000 S 442.500000 204.000000 452.500000 204.000000 L 571.250000 204.000000 S 581.250000 204.000000 581.250000 214.000000 L 581.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><mask id="3044386072" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1227" height="568">
+</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="87.500000" dy="0.000000">ninety</tspan><tspan x="87.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="183" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="258.500000" y="86.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="354" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="435.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="435.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="536" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="613.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="715" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="786.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="710" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="787.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="884" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="961.500000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 613.000000 156.000000 L 613.000000 194.000000 S 613.000000 204.000000 623.000000 204.000000 L 741.250000 204.000000 S 751.250000 204.000000 751.250000 214.000000 L 751.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 787.000000 156.000000 L 787.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 961.500000 156.000000 L 961.500000 194.000000 S 961.500000 204.000000 951.500000 204.000000 L 832.750000 204.000000 S 822.750000 204.000000 822.750000 214.000000 L 822.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><mask id="3106414556" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1227" height="568">
 <rect x="-100" y="-100" width="1227" height="568" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/regression/elk_alignment/elk/board.exp.json
+++ b/e2etests/testdata/regression/elk_alignment/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "build_workflow",
      "type": "",
      "pos": {
-        "x": 716,
+        "x": 12,
        "y": 12
      },
      "width": 480,
@ -46,7 +46,7 @@
      "id": "build_workflow.push",
      "type": "",
      "pos": {
-        "x": 791,
+        "x": 87,
        "y": 87
      },
      "width": 330,
@ -86,7 +86,7 @@
      "id": "build_workflow.GHA",
      "type": "",
      "pos": {
-        "x": 822,
+        "x": 117,
        "y": 290
      },
      "width": 269,
@ -126,7 +126,7 @@
      "id": "build_workflow.S3",
      "type": "",
      "pos": {
-        "x": 891,
+        "x": 186,
        "y": 493
      },
      "width": 131,
@ -166,7 +166,7 @@
      "id": "build_workflow.Terraform",
      "type": "",
      "pos": {
-        "x": 847,
+        "x": 143,
        "y": 696
      },
      "width": 218,
@ -206,7 +206,7 @@
      "id": "build_workflow.AWS",
      "type": "",
      "pos": {
-        "x": 879,
+        "x": 174,
        "y": 899
      },
      "width": 155,
@ -246,7 +246,7 @@
      "id": "deploy_workflow",
      "type": "",
      "pos": {
-        "x": 1216,
+        "x": 512,
        "y": 175
      },
      "width": 421,
@ -286,7 +286,7 @@
      "id": "deploy_workflow.manual",
      "type": "",
      "pos": {
-        "x": 1291,
+        "x": 587,
        "y": 250
      },
      "width": 271,
@ -326,7 +326,7 @@
      "id": "deploy_workflow.GHA",
      "type": "",
      "pos": {
-        "x": 1292,
+        "x": 588,
        "y": 453
      },
      "width": 269,
@ -366,7 +366,7 @@
      "id": "deploy_workflow.AWS",
      "type": "",
      "pos": {
-        "x": 1349,
+        "x": 645,
        "y": 736
      },
      "width": 155,
@ -406,7 +406,7 @@
      "id": "apollo_workflow",
      "type": "",
      "pos": {
-        "x": 12,
+        "x": 953,
        "y": 215
      },
      "width": 684,
@ -446,7 +446,7 @@
      "id": "apollo_workflow.apollo",
      "type": "",
      "pos": {
-        "x": 235,
+        "x": 1175,
        "y": 290
      },
      "width": 238,
@ -486,7 +486,7 @@
      "id": "apollo_workflow.GHA",
      "type": "",
      "pos": {
-        "x": 219,
+        "x": 1160,
        "y": 493
      },
      "width": 269,
@ -526,7 +526,7 @@
      "id": "apollo_workflow.AWS",
      "type": "",
      "pos": {
-        "x": 276,
+        "x": 1217,
        "y": 696
      },
      "width": 155,
@ -590,11 +590,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 956,
+          "x": 252,
          "y": 224
        },
        {
-          "x": 956,
+          "x": 252,
          "y": 290
        }
      ],
@ -629,11 +629,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 956,
+          "x": 252,
          "y": 427
        },
        {
-          "x": 956,
+          "x": 252,
          "y": 493
        }
      ],
@ -668,11 +668,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 956,
+          "x": 252,
          "y": 630
        },
        {
-          "x": 956,
+          "x": 252,
          "y": 696
        }
      ],
@ -707,11 +707,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 956,
+          "x": 252,
          "y": 833
        },
        {
-          "x": 956,
+          "x": 252,
          "y": 899
        }
      ],
@ -746,11 +746,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1426.5,
+          "x": 722.5,
          "y": 387
        },
        {
-          "x": 1426.5,
+          "x": 722.5,
          "y": 453
        }
      ],
@ -785,11 +785,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1426.5,
+          "x": 722.5,
          "y": 590
        },
        {
-          "x": 1426.5,
+          "x": 722.5,
          "y": 736
        }
      ],
@ -824,11 +824,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 353.5,
+          "x": 1294.5,
          "y": 427
        },
        {
-          "x": 353.5,
+          "x": 1294.5,
          "y": 493
        }
      ],
@ -863,11 +863,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 353.5,
+          "x": 1294.5,
          "y": 630
        },
        {
-          "x": 353.5,
+          "x": 1294.5,
          "y": 696
        }
      ],
--- a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/elk_order/dagre/board.exp.json
+++ b/e2etests/testdata/regression/elk_order/dagre/board.exp.json
@ -0,0 +1,675 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "queue",
+      "type": "queue",
+      "pos": {
+        "x": 0,
+        "y": 148
+      },
+      "width": 1336,
+      "height": 226,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#DEE1EB",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "queue.M0",
+      "type": "",
+      "pos": {
+        "x": 50,
+        "y": 198
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M0",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M1",
+      "type": "",
+      "pos": {
+        "x": 235,
+        "y": 198
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M1",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M2",
+      "type": "",
+      "pos": {
+        "x": 420,
+        "y": 198
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M2",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M3",
+      "type": "",
+      "pos": {
+        "x": 605,
+        "y": 198
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M3",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M4",
+      "type": "",
+      "pos": {
+        "x": 790,
+        "y": 198
+      },
+      "width": 126,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M4",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 26,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M5",
+      "type": "",
+      "pos": {
+        "x": 976,
+        "y": 198
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M5",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M6",
+      "type": "",
+      "pos": {
+        "x": 1161,
+        "y": 198
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M6",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "m0_desc",
+      "type": "text",
+      "pos": {
+        "x": 60,
+        "y": 12
+      },
+      "width": 106,
+      "height": 24,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Oldest message",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 106,
+      "labelHeight": 24,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "m2_desc",
+      "type": "text",
+      "pos": {
+        "x": 462,
+        "y": 12
+      },
+      "width": 41,
+      "height": 24,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Offset",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 41,
+      "labelHeight": 24,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "m5_desc",
+      "type": "text",
+      "pos": {
+        "x": 994,
+        "y": 12
+      },
+      "width": 90,
+      "height": 24,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Last message",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 90,
+      "labelHeight": 24,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "m6_desc",
+      "type": "text",
+      "pos": {
+        "x": 1154,
+        "y": 0
+      },
+      "width": 140,
+      "height": 48,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Next message will be\\\ninserted here",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 140,
+      "labelHeight": 48,
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(m0_desc -> queue.M0)[0]",
+      "src": "m0_desc",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "queue.M0",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 112.5,
+          "y": 36
+        },
+        {
+          "x": 112.5,
+          "y": 85.6
+        },
+        {
+          "x": 112.5,
+          "y": 158
+        },
+        {
+          "x": 112.5,
+          "y": 198
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(m2_desc -> queue.M2)[0]",
+      "src": "m2_desc",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "queue.M2",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 482.5,
+          "y": 36
+        },
+        {
+          "x": 482.5,
+          "y": 85.6
+        },
+        {
+          "x": 482.5,
+          "y": 158
+        },
+        {
+          "x": 482.5,
+          "y": 198
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(m5_desc -> queue.M5)[0]",
+      "src": "m5_desc",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "queue.M5",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 1038.5,
+          "y": 36
+        },
+        {
+          "x": 1038.5,
+          "y": 85.6
+        },
+        {
+          "x": 1038.5,
+          "y": 158
+        },
+        {
+          "x": 1038.5,
+          "y": 198
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(m6_desc -> queue.M6)[0]",
+      "src": "m6_desc",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "queue.M6",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 1223.5,
+          "y": 48
+        },
+        {
+          "x": 1223.5,
+          "y": 88
+        },
+        {
+          "x": 1223.5,
+          "y": 158
+        },
+        {
+          "x": 1223.5,
+          "y": 198
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
--- a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/elk_order/elk/board.exp.json
+++ b/e2etests/testdata/regression/elk_order/elk/board.exp.json
@ -0,0 +1,639 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "queue",
+      "type": "queue",
+      "pos": {
+        "x": 12,
+        "y": 165
+      },
+      "width": 1146,
+      "height": 276,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#DEE1EB",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "queue.M0",
+      "type": "",
+      "pos": {
+        "x": 87,
+        "y": 240
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M0",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M1",
+      "type": "",
+      "pos": {
+        "x": 232,
+        "y": 240
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M1",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M2",
+      "type": "",
+      "pos": {
+        "x": 377,
+        "y": 240
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M2",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M3",
+      "type": "",
+      "pos": {
+        "x": 522,
+        "y": 240
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M3",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M4",
+      "type": "",
+      "pos": {
+        "x": 667,
+        "y": 240
+      },
+      "width": 126,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M4",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 26,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M5",
+      "type": "",
+      "pos": {
+        "x": 813,
+        "y": 240
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M5",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "queue.M6",
+      "type": "",
+      "pos": {
+        "x": 958,
+        "y": 240
+      },
+      "width": 125,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "M6",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 25,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "m0_desc",
+      "type": "text",
+      "pos": {
+        "x": 96,
+        "y": 36
+      },
+      "width": 106,
+      "height": 24,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Oldest message",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 106,
+      "labelHeight": 24,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "m2_desc",
+      "type": "text",
+      "pos": {
+        "x": 419,
+        "y": 36
+      },
+      "width": 41,
+      "height": 24,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Offset",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 41,
+      "labelHeight": 24,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "m5_desc",
+      "type": "text",
+      "pos": {
+        "x": 830,
+        "y": 36
+      },
+      "width": 90,
+      "height": 24,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Last message",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 90,
+      "labelHeight": 24,
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "m6_desc",
+      "type": "text",
+      "pos": {
+        "x": 950,
+        "y": 12
+      },
+      "width": 140,
+      "height": 48,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Next message will be\\\ninserted here",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 140,
+      "labelHeight": 48,
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(m0_desc -> queue.M0)[0]",
+      "src": "m0_desc",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "queue.M0",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 149.5,
+          "y": 60
+        },
+        {
+          "x": 149.5,
+          "y": 240
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(m2_desc -> queue.M2)[0]",
+      "src": "m2_desc",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "queue.M2",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 439.5,
+          "y": 60
+        },
+        {
+          "x": 439.5,
+          "y": 240
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(m5_desc -> queue.M5)[0]",
+      "src": "m5_desc",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "queue.M5",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 875.5,
+          "y": 60
+        },
+        {
+          "x": 875.5,
+          "y": 240
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(m6_desc -> queue.M6)[0]",
+      "src": "m6_desc",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "queue.M6",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 1020.5,
+          "y": 60
+        },
+        {
+          "x": 1020.5,
+          "y": 240
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
--- a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/query_param_escape/dagre/board.exp.json
+++ b/e2etests/testdata/regression/query_param_escape/dagre/board.exp.json
@ -0,0 +1,58 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "my network",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 190,
+      "height": 152,
+      "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": "/infra/019-network.svg",
+        "RawPath": "",
+        "ForceQuery": false,
+        "RawQuery": "fuga=1&hoge",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "my network",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 90,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}
--- a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/query_param_escape/elk/board.exp.json
+++ b/e2etests/testdata/regression/query_param_escape/elk/board.exp.json
@ -0,0 +1,58 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "my network",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 190,
+      "height": 152,
+      "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": "/infra/019-network.svg",
+        "RawPath": "",
+        "ForceQuery": false,
+        "RawQuery": "fuga=1&hoge",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "my network",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 90,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}
--- a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/sql_table_overflow/dagre/board.exp.json
+++ b/e2etests/testdata/regression/sql_table_overflow/dagre/board.exp.json
@ -15,8 +15,8 @@
      "strokeDash": 0,
      "strokeWidth": 2,
      "borderRadius": 0,
-      "fill": "#FFFFFF",
-      "stroke": "#0A0F25",
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
      "shadow": false,
      "3d": false,
      "multiple": false,
@ -96,7 +96,10 @@
      "labelWidth": 211,
      "labelHeight": 36,
      "zIndex": 0,
-      "level": 1
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
    },
    {
      "id": "table_constrained",
@ -111,8 +114,8 @@
      "strokeDash": 0,
      "strokeWidth": 2,
      "borderRadius": 0,
-      "fill": "#FFFFFF",
-      "stroke": "#0A0F25",
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
      "shadow": false,
      "3d": false,
      "multiple": false,
@ -192,7 +195,10 @@
      "labelWidth": 350,
      "labelHeight": 36,
      "zIndex": 0,
-      "level": 1
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
    }
  ],
  "connections": []
--- a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
@ -18,15 +18,15 @@ width="1388" height="308" viewBox="-100 -100 1388 308"><style type="text/css">
 }

 ]]>
-</style><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:white">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">short</text>
-<text class="text" x="272.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">loooooooooooooooooooong</text>
-<text class="text" x="514.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="534.000000" y2="72.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">loooooooooooooooooooong</text>
-<text class="text" x="272.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">short</text>
-<text class="text" x="514.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="534.000000" y2="108.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="594" y="0" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="594.000000" y="0.000000" width="594.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="614.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:white">sql_table_constrained_overflow</text><text class="text" x="604.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">short</text>
-<text class="text" x="866.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">loooooooooooooooooooong</text>
-<text class="text" x="1168.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;">UNQ</text><line x1="594.000000" y1="72.000000" x2="1188.000000" y2="72.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="604.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">loooooooooooooooooooong</text>
-<text class="text" x="866.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">short</text>
-<text class="text" x="1168.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;">FK</text><line x1="594.000000" y1="108.000000" x2="1188.000000" y2="108.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><mask id="1631228640" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1388" height="308">
+</style><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+<text class="text" x="272.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
+<text class="text" x="514.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="534.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
+<text class="text" x="272.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
+<text class="text" x="514.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="534.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="594" y="0" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="594.000000" y="0.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="614.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="604.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+<text class="text" x="866.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
+<text class="text" x="1168.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="594.000000" y1="72.000000" x2="1188.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="604.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
+<text class="text" x="866.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
+<text class="text" x="1168.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="594.000000" y1="108.000000" x2="1188.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="3570027740" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1388" height="308">
 <rect x="-100" y="-100" width="1388" height="308" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/regression/sql_table_overflow/elk/board.exp.json
+++ b/e2etests/testdata/regression/sql_table_overflow/elk/board.exp.json
@ -15,8 +15,8 @@
      "strokeDash": 0,
      "strokeWidth": 2,
      "borderRadius": 0,
-      "fill": "#FFFFFF",
-      "stroke": "#0A0F25",
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
      "shadow": false,
      "3d": false,
      "multiple": false,
@ -96,7 +96,10 @@
      "labelWidth": 211,
      "labelHeight": 36,
      "zIndex": 0,
-      "level": 1
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
    },
    {
      "id": "table_constrained",
@ -111,8 +114,8 @@
      "strokeDash": 0,
      "strokeWidth": 2,
      "borderRadius": 0,
-      "fill": "#FFFFFF",
-      "stroke": "#0A0F25",
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
      "shadow": false,
      "3d": false,
      "multiple": false,
@ -192,7 +195,10 @@
      "labelWidth": 350,
      "labelHeight": 36,
      "zIndex": 0,
-      "level": 1
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
    }
  ],
  "connections": []
--- a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
@ -18,15 +18,15 @@ width="1348" height="308" viewBox="-88 -88 1348 308"><style type="text/css">
 }

 ]]>
-</style><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:white">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">short</text>
-<text class="text" x="284.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">loooooooooooooooooooong</text>
-<text class="text" x="526.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="546.000000" y2="84.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">loooooooooooooooooooong</text>
-<text class="text" x="284.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">short</text>
-<text class="text" x="526.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="546.000000" y2="120.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="566" y="12" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="566.000000" y="12.000000" width="594.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="586.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:white">sql_table_constrained_overflow</text><text class="text" x="576.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">short</text>
-<text class="text" x="838.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">loooooooooooooooooooong</text>
-<text class="text" x="1140.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;">UNQ</text><line x1="566.000000" y1="84.000000" x2="1160.000000" y2="84.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="576.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">loooooooooooooooooooong</text>
-<text class="text" x="838.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">short</text>
-<text class="text" x="1140.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;">FK</text><line x1="566.000000" y1="120.000000" x2="1160.000000" y2="120.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><mask id="1355556118" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1348" height="308">
+</style><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+<text class="text" x="284.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
+<text class="text" x="526.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="546.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
+<text class="text" x="284.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
+<text class="text" x="526.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="546.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="566" y="12" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="566.000000" y="12.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="586.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="576.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+<text class="text" x="838.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
+<text class="text" x="1140.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="566.000000" y1="84.000000" x2="1160.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="576.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
+<text class="text" x="838.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
+<text class="text" x="1140.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="566.000000" y1="120.000000" x2="1160.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="1110839858" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1348" height="308">
 <rect x="-100" y="-100" width="1348" height="308" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/sanity/1_to_2/elk/board.exp.json
+++ b/e2etests/testdata/sanity/1_to_2/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 31,
+        "x": 30,
        "y": 12
      },
      "width": 113,
--- a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
@ -18,7 +18,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)" mask="url(#3433333173)"/></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(#3433333173)"/></g><mask id="3433333173" maskUnits="userSpaceOnUse" x="-100" y="-100" width="446" height="552">
+</style><g id="a"><g class="shape" ><rect x="30" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><mask id="1488396738" maskUnits="userSpaceOnUse" x="-100" y="-100" width="446" height="552">
 <rect x="-100" y="-100" width="446" height="552" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/sanity/child_to_child/elk/board.exp.json
+++ b/e2etests/testdata/sanity/child_to_child/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 13,
+        "x": 12,
        "y": 12
      },
      "width": 263,
@ -46,7 +46,7 @@
      "id": "a.b",
      "type": "",
      "pos": {
-        "x": 88,
+        "x": 87,
        "y": 87
      },
      "width": 113,
--- a/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
@ -18,7 +18,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" 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" 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(#2473032921)"/></g><mask id="2473032921" maskUnits="userSpaceOnUse" x="-100" y="-100" width="464" height="862">
+</style><g id="a"><g class="shape" ><rect x="12" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="143.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3058194229)"/></g><mask id="3058194229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="464" height="862">
 <rect x="-100" y="-100" width="464" height="862" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/all_shapes/elk/board.exp.json
+++ b/e2etests/testdata/stable/all_shapes/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "rectangle",
      "type": "rectangle",
      "pos": {
-        "x": 769,
+        "x": 12,
        "y": 12
      },
      "width": 171,
@ -46,7 +46,7 @@
      "id": "square",
      "type": "rectangle",
      "pos": {
-        "x": 778,
+        "x": 20,
        "y": 238
      },
      "width": 154,
@ -86,7 +86,7 @@
      "id": "page",
      "type": "page",
      "pos": {
-        "x": 785,
+        "x": 28,
        "y": 492
      },
      "width": 139,
@ -126,7 +126,7 @@
      "id": "parallelogram",
      "type": "parallelogram",
      "pos": {
-        "x": 960,
+        "x": 203,
        "y": 12
      },
      "width": 204,
@ -166,7 +166,7 @@
      "id": "document",
      "type": "document",
      "pos": {
-        "x": 974,
+        "x": 216,
        "y": 252
      },
      "width": 177,
@ -206,7 +206,7 @@
      "id": "cylinder",
      "type": "cylinder",
      "pos": {
-        "x": 980,
+        "x": 223,
        "y": 492
      },
      "width": 164,
@ -246,7 +246,7 @@
      "id": "queue",
      "type": "queue",
      "pos": {
-        "x": 19,
+        "x": 427,
        "y": 12
      },
      "width": 149,
@ -286,7 +286,7 @@
      "id": "package",
      "type": "package",
      "pos": {
-        "x": 12,
+        "x": 420,
        "y": 252
      },
      "width": 163,
@ -326,7 +326,7 @@
      "id": "step",
      "type": "step",
      "pos": {
-        "x": 26,
+        "x": 433,
        "y": 492
      },
      "width": 136,
@ -366,7 +366,7 @@
      "id": "callout",
      "type": "callout",
      "pos": {
-        "x": 213,
+        "x": 621,
        "y": 12
      },
      "width": 155,
@ -406,7 +406,7 @@
      "id": "stored_data",
      "type": "stored_data",
      "pos": {
-        "x": 195,
+        "x": 603,
        "y": 252
      },
      "width": 191,
@ -446,7 +446,7 @@
      "id": "person",
      "type": "person",
      "pos": {
-        "x": 214,
+        "x": 622,
        "y": 492
      },
      "width": 153,
@ -486,7 +486,7 @@
      "id": "diamond",
      "type": "diamond",
      "pos": {
-        "x": 581,
+        "x": 798,
        "y": 12
      },
      "width": 168,
@ -526,7 +526,7 @@
      "id": "oval",
      "type": "oval",
      "pos": {
-        "x": 597,
+        "x": 814,
        "y": 252
      },
      "width": 136,
@ -566,7 +566,7 @@
      "id": "circle",
      "type": "oval",
      "pos": {
-        "x": 593,
+        "x": 810,
        "y": 492
      },
      "width": 144,
@ -606,7 +606,7 @@
      "id": "hexagon",
      "type": "hexagon",
      "pos": {
-        "x": 396,
+        "x": 986,
        "y": 12
      },
      "width": 165,
@ -646,7 +646,7 @@
      "id": "cloud",
      "type": "cloud",
      "pos": {
-        "x": 406,
+        "x": 996,
        "y": 238
      },
      "width": 145,
@ -710,11 +710,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 138
        },
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 238
        }
      ],
@ -749,11 +749,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 392
        },
        {
-          "x": 855,
+          "x": 98,
          "y": 492
        }
      ],
@ -788,11 +788,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1062,
+          "x": 305,
          "y": 138
        },
        {
-          "x": 1062,
+          "x": 306,
          "y": 252
        }
      ],
@ -827,11 +827,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1062,
+          "x": 305,
          "y": 361
        },
        {
-          "x": 1062,
+          "x": 305,
          "y": 492
        }
      ],
@ -866,11 +866,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 93,
+          "x": 501,
          "y": 138
        },
        {
-          "x": 94,
+          "x": 502,
          "y": 252
        }
      ],
@ -905,11 +905,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 93,
+          "x": 501,
          "y": 378
        },
        {
-          "x": 94,
+          "x": 502,
          "y": 492
        }
      ],
@ -944,11 +944,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 291,
+          "x": 699,
          "y": 138
        },
        {
-          "x": 291,
+          "x": 699,
          "y": 252
        }
      ],
@ -983,11 +983,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 290,
+          "x": 698,
          "y": 378
        },
        {
-          "x": 291,
+          "x": 699,
          "y": 492
        }
      ],
@ -1022,11 +1022,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 665,
+          "x": 882,
          "y": 138
        },
        {
-          "x": 665,
+          "x": 882,
          "y": 252
        }
      ],
@ -1061,11 +1061,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 665,
+          "x": 882,
          "y": 378
        },
        {
-          "x": 665,
+          "x": 882,
          "y": 492
        }
      ],
@ -1100,11 +1100,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 478,
+          "x": 1068,
          "y": 138
        },
        {
-          "x": 479,
+          "x": 1069,
          "y": 240
        }
      ],
--- a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_multiple/elk/board.exp.json
+++ b/e2etests/testdata/stable/all_shapes_multiple/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "rectangle",
      "type": "rectangle",
      "pos": {
-        "x": 769,
+        "x": 12,
        "y": 12
      },
      "width": 171,
@ -46,7 +46,7 @@
      "id": "square",
      "type": "rectangle",
      "pos": {
-        "x": 778,
+        "x": 20,
        "y": 238
      },
      "width": 154,
@ -86,7 +86,7 @@
      "id": "page",
      "type": "page",
      "pos": {
-        "x": 785,
+        "x": 28,
        "y": 492
      },
      "width": 139,
@ -126,7 +126,7 @@
      "id": "parallelogram",
      "type": "parallelogram",
      "pos": {
-        "x": 960,
+        "x": 203,
        "y": 12
      },
      "width": 204,
@ -166,7 +166,7 @@
      "id": "document",
      "type": "document",
      "pos": {
-        "x": 974,
+        "x": 216,
        "y": 252
      },
      "width": 177,
@ -206,7 +206,7 @@
      "id": "cylinder",
      "type": "cylinder",
      "pos": {
-        "x": 980,
+        "x": 223,
        "y": 492
      },
      "width": 164,
@ -246,7 +246,7 @@
      "id": "queue",
      "type": "queue",
      "pos": {
-        "x": 19,
+        "x": 427,
        "y": 12
      },
      "width": 149,
@ -286,7 +286,7 @@
      "id": "package",
      "type": "package",
      "pos": {
-        "x": 12,
+        "x": 420,
        "y": 252
      },
      "width": 163,
@ -326,7 +326,7 @@
      "id": "step",
      "type": "step",
      "pos": {
-        "x": 26,
+        "x": 433,
        "y": 492
      },
      "width": 136,
@ -366,7 +366,7 @@
      "id": "callout",
      "type": "callout",
      "pos": {
-        "x": 213,
+        "x": 621,
        "y": 12
      },
      "width": 155,
@ -406,7 +406,7 @@
      "id": "stored_data",
      "type": "stored_data",
      "pos": {
-        "x": 195,
+        "x": 603,
        "y": 252
      },
      "width": 191,
@ -446,7 +446,7 @@
      "id": "person",
      "type": "person",
      "pos": {
-        "x": 214,
+        "x": 622,
        "y": 492
      },
      "width": 153,
@ -486,7 +486,7 @@
      "id": "diamond",
      "type": "diamond",
      "pos": {
-        "x": 581,
+        "x": 798,
        "y": 12
      },
      "width": 168,
@ -526,7 +526,7 @@
      "id": "oval",
      "type": "oval",
      "pos": {
-        "x": 597,
+        "x": 814,
        "y": 252
      },
      "width": 136,
@ -566,7 +566,7 @@
      "id": "circle",
      "type": "oval",
      "pos": {
-        "x": 593,
+        "x": 810,
        "y": 492
      },
      "width": 144,
@ -606,7 +606,7 @@
      "id": "hexagon",
      "type": "hexagon",
      "pos": {
-        "x": 396,
+        "x": 986,
        "y": 12
      },
      "width": 165,
@ -646,7 +646,7 @@
      "id": "cloud",
      "type": "cloud",
      "pos": {
-        "x": 406,
+        "x": 996,
        "y": 238
      },
      "width": 145,
@ -710,11 +710,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 138
        },
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 238
        }
      ],
@ -749,11 +749,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 392
        },
        {
-          "x": 855,
+          "x": 98,
          "y": 492
        }
      ],
@ -788,11 +788,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1062,
+          "x": 305,
          "y": 138
        },
        {
-          "x": 1062,
+          "x": 306,
          "y": 252
        }
      ],
@ -827,11 +827,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1062,
+          "x": 305,
          "y": 361
        },
        {
-          "x": 1062,
+          "x": 305,
          "y": 492
        }
      ],
@ -866,11 +866,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 93,
+          "x": 501,
          "y": 138
        },
        {
-          "x": 94,
+          "x": 502,
          "y": 252
        }
      ],
@ -905,11 +905,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 93,
+          "x": 501,
          "y": 378
        },
        {
-          "x": 94,
+          "x": 502,
          "y": 492
        }
      ],
@ -944,11 +944,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 291,
+          "x": 699,
          "y": 138
        },
        {
-          "x": 291,
+          "x": 699,
          "y": 252
        }
      ],
@ -983,11 +983,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 290,
+          "x": 698,
          "y": 378
        },
        {
-          "x": 291,
+          "x": 699,
          "y": 492
        }
      ],
@ -1022,11 +1022,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 665,
+          "x": 882,
          "y": 138
        },
        {
-          "x": 665,
+          "x": 882,
          "y": 252
        }
      ],
@ -1061,11 +1061,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 665,
+          "x": 882,
          "y": 378
        },
        {
-          "x": 665,
+          "x": 882,
          "y": 492
        }
      ],
@ -1100,11 +1100,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 478,
+          "x": 1068,
          "y": 138
        },
        {
-          "x": 479,
+          "x": 1069,
          "y": 240
        }
      ],
--- a/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_shadow/elk/board.exp.json
+++ b/e2etests/testdata/stable/all_shapes_shadow/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "rectangle",
      "type": "rectangle",
      "pos": {
-        "x": 769,
+        "x": 12,
        "y": 12
      },
      "width": 171,
@ -46,7 +46,7 @@
      "id": "square",
      "type": "rectangle",
      "pos": {
-        "x": 778,
+        "x": 20,
        "y": 238
      },
      "width": 154,
@ -86,7 +86,7 @@
      "id": "page",
      "type": "page",
      "pos": {
-        "x": 785,
+        "x": 28,
        "y": 492
      },
      "width": 139,
@ -126,7 +126,7 @@
      "id": "parallelogram",
      "type": "parallelogram",
      "pos": {
-        "x": 960,
+        "x": 203,
        "y": 12
      },
      "width": 204,
@ -166,7 +166,7 @@
      "id": "document",
      "type": "document",
      "pos": {
-        "x": 974,
+        "x": 216,
        "y": 252
      },
      "width": 177,
@ -206,7 +206,7 @@
      "id": "cylinder",
      "type": "cylinder",
      "pos": {
-        "x": 980,
+        "x": 223,
        "y": 492
      },
      "width": 164,
@ -246,7 +246,7 @@
      "id": "queue",
      "type": "queue",
      "pos": {
-        "x": 19,
+        "x": 427,
        "y": 12
      },
      "width": 149,
@ -286,7 +286,7 @@
      "id": "package",
      "type": "package",
      "pos": {
-        "x": 12,
+        "x": 420,
        "y": 252
      },
      "width": 163,
@ -326,7 +326,7 @@
      "id": "step",
      "type": "step",
      "pos": {
-        "x": 26,
+        "x": 433,
        "y": 492
      },
      "width": 136,
@ -366,7 +366,7 @@
      "id": "callout",
      "type": "callout",
      "pos": {
-        "x": 213,
+        "x": 621,
        "y": 12
      },
      "width": 155,
@ -406,7 +406,7 @@
      "id": "stored_data",
      "type": "stored_data",
      "pos": {
-        "x": 195,
+        "x": 603,
        "y": 252
      },
      "width": 191,
@ -446,7 +446,7 @@
      "id": "person",
      "type": "person",
      "pos": {
-        "x": 214,
+        "x": 622,
        "y": 492
      },
      "width": 153,
@ -486,7 +486,7 @@
      "id": "diamond",
      "type": "diamond",
      "pos": {
-        "x": 581,
+        "x": 798,
        "y": 12
      },
      "width": 168,
@ -526,7 +526,7 @@
      "id": "oval",
      "type": "oval",
      "pos": {
-        "x": 597,
+        "x": 814,
        "y": 252
      },
      "width": 136,
@ -566,7 +566,7 @@
      "id": "circle",
      "type": "oval",
      "pos": {
-        "x": 593,
+        "x": 810,
        "y": 492
      },
      "width": 144,
@ -606,7 +606,7 @@
      "id": "hexagon",
      "type": "hexagon",
      "pos": {
-        "x": 396,
+        "x": 986,
        "y": 12
      },
      "width": 165,
@ -646,7 +646,7 @@
      "id": "cloud",
      "type": "cloud",
      "pos": {
-        "x": 406,
+        "x": 996,
        "y": 238
      },
      "width": 145,
@ -710,11 +710,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 138
        },
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 238
        }
      ],
@ -749,11 +749,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 854.5,
+          "x": 97.5,
          "y": 392
        },
        {
-          "x": 855,
+          "x": 98,
          "y": 492
        }
      ],
@ -788,11 +788,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1062,
+          "x": 305,
          "y": 138
        },
        {
-          "x": 1062,
+          "x": 306,
          "y": 252
        }
      ],
@ -827,11 +827,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1062,
+          "x": 305,
          "y": 361
        },
        {
-          "x": 1062,
+          "x": 305,
          "y": 492
        }
      ],
@ -866,11 +866,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 93,
+          "x": 501,
          "y": 138
        },
        {
-          "x": 94,
+          "x": 502,
          "y": 252
        }
      ],
@ -905,11 +905,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 93,
+          "x": 501,
          "y": 378
        },
        {
-          "x": 94,
+          "x": 502,
          "y": 492
        }
      ],
@ -944,11 +944,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 291,
+          "x": 699,
          "y": 138
        },
        {
-          "x": 291,
+          "x": 699,
          "y": 252
        }
      ],
@ -983,11 +983,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 290,
+          "x": 698,
          "y": 378
        },
        {
-          "x": 291,
+          "x": 699,
          "y": 492
        }
      ],
@ -1022,11 +1022,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 665,
+          "x": 882,
          "y": 138
        },
        {
-          "x": 665,
+          "x": 882,
          "y": 252
        }
      ],
@ -1061,11 +1061,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 665,
+          "x": 882,
          "y": 378
        },
        {
-          "x": 665,
+          "x": 882,
          "y": 492
        }
      ],
@ -1100,11 +1100,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 478,
+          "x": 1068,
          "y": 138
        },
        {
-          "x": 479,
+          "x": 1069,
          "y": 240
        }
      ],
--- a/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/arrowhead_adjustment/elk/board.exp.json
+++ b/e2etests/testdata/stable/arrowhead_adjustment/elk/board.exp.json
@ -86,7 +86,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 103,
+        "x": 102,
        "y": 248
      },
      "width": 113,
@ -315,7 +315,7 @@
      "route": [
        {
          "x": 78,
-          "y": 120
+          "y": 121
        },
        {
          "x": 77.91666666666667,
--- a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/binary_tree/elk/board.exp.json
+++ b/e2etests/testdata/stable/binary_tree/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 67,
+        "x": 68,
        "y": 12
      },
      "width": 113,
@ -46,7 +46,7 @@
      "id": "b",
      "type": "",
      "pos": {
-        "x": 48,
+        "x": 49,
        "y": 238
      },
      "width": 113,
@ -86,7 +86,7 @@
      "id": "c",
      "type": "",
      "pos": {
-        "x": 575,
+        "x": 572,
        "y": 238
      },
      "width": 113,
@ -126,7 +126,7 @@
      "id": "d",
      "type": "",
      "pos": {
-        "x": 294,
+        "x": 30,
        "y": 464
      },
      "width": 114,
@ -166,7 +166,7 @@
      "id": "e",
      "type": "",
      "pos": {
-        "x": 29,
+        "x": 291,
        "y": 464
      },
      "width": 113,
@ -206,7 +206,7 @@
      "id": "f",
      "type": "",
      "pos": {
-        "x": 822,
+        "x": 554,
        "y": 464
      },
      "width": 111,
@ -246,7 +246,7 @@
      "id": "g",
      "type": "",
      "pos": {
-        "x": 556,
+        "x": 821,
        "y": 464
      },
      "width": 114,
@ -286,7 +286,7 @@
      "id": "h",
      "type": "",
      "pos": {
-        "x": 275,
+        "x": 12,
        "y": 690
      },
      "width": 113,
@ -326,7 +326,7 @@
      "id": "i",
      "type": "",
      "pos": {
-        "x": 408,
+        "x": 145,
        "y": 690
      },
      "width": 109,
@ -366,7 +366,7 @@
      "id": "j",
      "type": "",
      "pos": {
-        "x": 12,
+        "x": 274,
        "y": 690
      },
      "width": 110,
@ -406,7 +406,7 @@
      "id": "k",
      "type": "",
      "pos": {
-        "x": 142,
+        "x": 404,
        "y": 690
      },
      "width": 113,
@ -446,7 +446,7 @@
      "id": "l",
      "type": "",
      "pos": {
-        "x": 804,
+        "x": 537,
        "y": 690
      },
      "width": 109,
@ -486,7 +486,7 @@
      "id": "m",
      "type": "",
      "pos": {
-        "x": 933,
+        "x": 666,
        "y": 690
      },
      "width": 117,
@ -526,7 +526,7 @@
      "id": "n",
      "type": "",
      "pos": {
-        "x": 671,
+        "x": 803,
        "y": 690
      },
      "width": 113,
@ -566,7 +566,7 @@
      "id": "o",
      "type": "",
      "pos": {
-        "x": 537,
+        "x": 936,
        "y": 690
      },
      "width": 114,
@ -630,11 +630,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 104.66666666666666,
+          "x": 106.33333333333333,
          "y": 138
        },
        {
-          "x": 104.66666666666666,
+          "x": 106.33333333333333,
          "y": 238
        }
      ],
@ -669,19 +669,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 142.33333333333331,
+          "x": 144,
          "y": 138
        },
        {
-          "x": 142.33333333333331,
+          "x": 144,
          "y": 188
        },
        {
-          "x": 631.8333333333334,
+          "x": 628.8333333333334,
          "y": 188
        },
        {
-          "x": 631.8333333333334,
+          "x": 628.8333333333334,
          "y": 238
        }
      ],
@ -716,19 +716,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 123.5,
+          "x": 87.5,
          "y": 364
        },
        {
-          "x": 123.5,
-          "y": 414
-        },
-        {
-          "x": 350.5,
-          "y": 414
-        },
-        {
-          "x": 350.5,
+          "x": 87.5,
          "y": 464
        }
      ],
@ -763,11 +755,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 85.83333333333333,
+          "x": 125.16666666666667,
          "y": 364
        },
        {
-          "x": 85.83333333333333,
+          "x": 125.16666666666667,
+          "y": 414
+        },
+        {
+          "x": 347.8333333333333,
+          "y": 414
+        },
+        {
+          "x": 347.8333333333333,
          "y": 464
        }
      ],
@ -802,19 +802,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 650.6666666666667,
+          "x": 610,
          "y": 364
        },
        {
-          "x": 650.6666666666667,
-          "y": 414
-        },
-        {
-          "x": 877,
-          "y": 414
-        },
-        {
-          "x": 877,
+          "x": 610,
          "y": 464
        }
      ],
@ -849,11 +841,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 613,
+          "x": 647.6666666666667,
          "y": 364
        },
        {
-          "x": 613,
+          "x": 647.6666666666667,
+          "y": 414
+        },
+        {
+          "x": 878.5,
+          "y": 414
+        },
+        {
+          "x": 878.5,
          "y": 464
        }
      ],
@ -888,11 +888,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 331.5,
+          "x": 68.5,
          "y": 590
        },
        {
-          "x": 331.5,
+          "x": 68.5,
          "y": 690
        }
      ],
@ -927,19 +927,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 369.5,
+          "x": 106.5,
          "y": 590
        },
        {
-          "x": 369.5,
+          "x": 106.5,
          "y": 640
        },
        {
-          "x": 462.5,
+          "x": 199.5,
          "y": 640
        },
        {
-          "x": 462.5,
+          "x": 199.5,
          "y": 690
        }
      ],
@ -974,11 +974,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 67,
+          "x": 329,
          "y": 590
        },
        {
-          "x": 67,
+          "x": 329,
          "y": 690
        }
      ],
@ -1013,19 +1013,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 104.66666666666667,
+          "x": 366.66666666666663,
          "y": 590
        },
        {
-          "x": 104.66666666666667,
+          "x": 366.66666666666663,
          "y": 640
        },
        {
-          "x": 198.5,
+          "x": 460.5,
          "y": 640
        },
        {
-          "x": 198.5,
+          "x": 460.5,
          "y": 690
        }
      ],
@ -1060,11 +1060,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 858.5,
+          "x": 591.5,
          "y": 590
        },
        {
-          "x": 858.5,
+          "x": 591.5,
          "y": 690
        }
      ],
@ -1099,19 +1099,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 895.5,
+          "x": 628.5,
          "y": 590
        },
        {
-          "x": 895.5,
+          "x": 628.5,
          "y": 640
        },
        {
-          "x": 991.5,
+          "x": 724.5,
          "y": 640
        },
        {
-          "x": 991.5,
+          "x": 724.5,
          "y": 690
        }
      ],
@ -1146,19 +1146,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 632,
+          "x": 859.5,
          "y": 590
        },
        {
-          "x": 632,
-          "y": 640
-        },
-        {
-          "x": 727.5,
-          "y": 640
-        },
-        {
-          "x": 727.5,
+          "x": 859.5,
          "y": 690
        }
      ],
@ -1193,11 +1185,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 594,
+          "x": 897.5,
          "y": 590
        },
        {
-          "x": 594,
+          "x": 897.5,
+          "y": 640
+        },
+        {
+          "x": 993,
+          "y": 640
+        },
+        {
+          "x": 993,
          "y": 690
        }
      ],
--- a/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/chaos2/dagre/board.exp.json
+++ b/e2etests/testdata/stable/chaos2/dagre/board.exp.json
@ -9,8 +9,8 @@
        "x": 0,
        "y": 0
      },
-      "width": 1117,
-      "height": 1654,
+      "width": 1115,
+      "height": 1651,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -50,7 +50,7 @@
        "y": 50
      },
      "width": 776,
-      "height": 1554,
+      "height": 1551,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -90,7 +90,7 @@
        "y": 878
      },
      "width": 510,
-      "height": 676,
+      "height": 673,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -167,10 +167,10 @@
      "type": "text",
      "pos": {
        "x": 232,
-        "y": 1029
+        "y": 1031
      },
      "width": 16,
-      "height": 24,
+      "height": 21,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -194,10 +194,10 @@
      "language": "",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
      "labelWidth": 16,
-      "labelHeight": 24,
+      "labelHeight": 21,
      "zIndex": 0,
      "level": 5
    },
@ -249,7 +249,7 @@
        "y": 1254
      },
      "width": 17,
-      "height": 24,
+      "height": 21,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -273,10 +273,10 @@
      "language": "",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
      "labelWidth": 17,
-      "labelHeight": 24,
+      "labelHeight": 21,
      "zIndex": 0,
      "level": 4
    },
@ -285,7 +285,7 @@
      "type": "",
      "pos": {
        "x": 356,
-        "y": 1378
+        "y": 1375
      },
      "width": 123,
      "height": 126,
@ -405,7 +405,7 @@
      "type": "oval",
      "pos": {
        "x": 641,
-        "y": 1378
+        "y": 1375
      },
      "width": 126,
      "height": 126,
@ -444,7 +444,7 @@
      "id": "aa.ll",
      "type": "",
      "pos": {
-        "x": 915,
+        "x": 914,
        "y": 652
      },
      "width": 114,
@ -484,7 +484,7 @@
      "id": "aa.mm",
      "type": "cylinder",
      "pos": {
-        "x": 902,
+        "x": 901,
        "y": 426
      },
      "width": 131,
@ -525,10 +525,10 @@
      "type": "text",
      "pos": {
        "x": 867,
-        "y": 1429
+        "y": 1428
      },
-      "width": 18,
-      "height": 24,
+      "width": 16,
+      "height": 21,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -552,10 +552,10 @@
      "language": "",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
-      "labelWidth": 18,
-      "labelHeight": 24,
+      "labelWidth": 16,
+      "labelHeight": 21,
      "zIndex": 0,
      "level": 2
    },
@ -563,8 +563,8 @@
      "id": "aa.oo",
      "type": "",
      "pos": {
-        "x": 945,
-        "y": 1378
+        "x": 943,
+        "y": 1375
      },
      "width": 123,
      "height": 126,
@ -628,19 +628,19 @@
      "route": [
        {
          "x": 240,
-          "y": 1053
+          "y": 1052.5
        },
        {
          "x": 240,
-          "y": 1133.8
+          "y": 1133.7
        },
        {
          "x": 273.8,
-          "y": 1215.8
+          "y": 1215.6
        },
        {
          "x": 409,
-          "y": 1263
+          "y": 1262
        }
      ],
      "isCurve": true,
@ -676,19 +676,19 @@
      "route": [
        {
          "x": 417.5,
-          "y": 1278
+          "y": 1275
        },
        {
          "x": 417.5,
-          "y": 1318
+          "y": 1315
        },
        {
          "x": 417.5,
-          "y": 1338
+          "y": 1335
        },
        {
          "x": 417.5,
-          "y": 1378
+          "y": 1375
        }
      ],
      "isCurve": true,
@ -819,20 +819,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 914.5,
-          "y": 723.8051948051948
+          "x": 913.5,
+          "y": 723.8172484599589
        },
        {
-          "x": 836.1,
-          "y": 735.8051948051948
+          "x": 835.9,
+          "y": 735.8172484599589
        },
        {
-          "x": 894.9,
-          "y": 726.8051948051948
+          "x": 894.1,
+          "y": 726.8172484599589
        },
        {
          "x": 816.5,
-          "y": 738.8051948051948
+          "y": 738.8172484599589
        }
      ],
      "isCurve": true,
@ -867,11 +867,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 902,
+          "x": 901,
          "y": 500
        },
        {
-          "x": 404.4,
+          "x": 404.2,
          "y": 581.6
        },
        {
@ -927,19 +927,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 970,
+          "x": 969,
          "y": 552
        },
        {
-          "x": 971.2,
+          "x": 970.2,
          "y": 592
        },
        {
-          "x": 971.5,
+          "x": 970.5,
          "y": 612
        },
        {
-          "x": 971.5,
+          "x": 970.5,
          "y": 652
        }
      ],
@ -975,20 +975,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 902,
+          "x": 901,
          "y": 500
        },
        {
-          "x": 833.8,
-          "y": 512.3482425646968
+          "x": 833.6,
+          "y": 512.3623984526112
        },
        {
-          "x": 884.95,
-          "y": 503.08706064117416
+          "x": 884.15,
+          "y": 503.0905996131528
        },
        {
          "x": 816.75,
-          "y": 515.4353032058709
+          "y": 515.452998065764
        }
      ],
      "isCurve": true,
@ -1023,12 +1023,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 914.5,
-          "y": 729.1095290251917
+          "x": 913.5,
+          "y": 729.1405049396268
        },
        {
-          "x": 594.9,
-          "y": 808.2219058050383
+          "x": 594.7,
+          "y": 808.2281009879254
        },
        {
          "x": 515,
@ -1080,11 +1080,11 @@
        },
        {
          "x": 497.2,
-          "y": 1215.4
+          "y": 1215
        },
        {
          "x": 426,
-          "y": 1261
+          "y": 1259
        }
      ],
      "isCurve": true,
@ -1119,11 +1119,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 902,
+          "x": 901,
          "y": 476
        },
        {
-          "x": 500.4,
+          "x": 500.2,
          "y": 396
        },
        {
@ -1175,12 +1175,12 @@
          "y": 838
        },
        {
-          "x": 484.9,
-          "y": 807.5686868686869
+          "x": 484.7,
+          "y": 807.5723440134907
        },
        {
-          "x": 914.5,
-          "y": 725.8434343434343
+          "x": 913.5,
+          "y": 725.8617200674536
        }
      ],
      "isCurve": true,
@ -1235,12 +1235,12 @@
          "y": 466.4
        },
        {
-          "x": 470.9,
-          "y": 622.493376941946
+          "x": 470.7,
+          "y": 622.4899262899263
        },
        {
-          "x": 914.5,
-          "y": 704.4668847097302
+          "x": 913.5,
+          "y": 704.4496314496314
        }
      ],
      "isCurve": true,
--- a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/chaos2/elk/board.exp.json
+++ b/e2etests/testdata/stable/chaos2/elk/board.exp.json
@ -9,8 +9,8 @@
        "x": 12,
        "y": 12
      },
-      "width": 880,
-      "height": 1707,
+      "width": 892,
+      "height": 1704,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -46,11 +46,11 @@
      "id": "aa.bb",
      "type": "",
      "pos": {
-        "x": 132,
-        "y": 445
+        "x": 107,
+        "y": 465
      },
-      "width": 685,
-      "height": 1174,
+      "width": 722,
+      "height": 1151,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -86,11 +86,11 @@
      "id": "aa.bb.cc",
      "type": "",
      "pos": {
-        "x": 278,
+        "x": 281,
        "y": 841
      },
-      "width": 464,
-      "height": 703,
+      "width": 473,
+      "height": 700,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -126,7 +126,7 @@
      "id": "aa.bb.cc.dd",
      "type": "rectangle",
      "pos": {
-        "x": 364,
+        "x": 356,
        "y": 916
      },
      "width": 303,
@ -166,11 +166,11 @@
      "id": "aa.bb.cc.dd.ee",
      "type": "text",
      "pos": {
-        "x": 576,
-        "y": 1093
+        "x": 431,
+        "y": 1096
      },
      "width": 16,
-      "height": 24,
+      "height": 21,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -194,10 +194,10 @@
      "language": "",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
      "labelWidth": 16,
-      "labelHeight": 24,
+      "labelHeight": 21,
      "zIndex": 0,
      "level": 5
    },
@ -205,7 +205,7 @@
      "id": "aa.bb.cc.dd.ff",
      "type": "",
      "pos": {
-        "x": 439,
+        "x": 467,
        "y": 991
      },
      "width": 117,
@ -245,11 +245,11 @@
      "id": "aa.bb.cc.gg",
      "type": "text",
      "pos": {
-        "x": 573,
+        "x": 433,
        "y": 1258
      },
      "width": 17,
-      "height": 24,
+      "height": 21,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -273,10 +273,10 @@
      "language": "",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
      "labelWidth": 17,
-      "labelHeight": 24,
+      "labelHeight": 21,
      "zIndex": 0,
      "level": 4
    },
@ -284,8 +284,8 @@
      "id": "aa.bb.cc.hh",
      "type": "",
      "pos": {
-        "x": 520,
-        "y": 1343
+        "x": 380,
+        "y": 1340
      },
      "width": 123,
      "height": 126,
@ -324,8 +324,8 @@
      "id": "aa.bb.ii",
      "type": "package",
      "pos": {
-        "x": 364,
-        "y": 520
+        "x": 181,
+        "y": 540
      },
      "width": 265,
      "height": 276,
@ -364,8 +364,8 @@
      "id": "aa.bb.ii.jj",
      "type": "diamond",
      "pos": {
-        "x": 439,
-        "y": 595
+        "x": 256,
+        "y": 615
      },
      "width": 115,
      "height": 126,
@ -404,8 +404,8 @@
      "id": "aa.bb.kk",
      "type": "oval",
      "pos": {
-        "x": 207,
-        "y": 595
+        "x": 533,
+        "y": 615
      },
      "width": 126,
      "height": 126,
@ -444,8 +444,8 @@
      "id": "aa.ll",
      "type": "",
      "pos": {
-        "x": 355,
-        "y": 233
+        "x": 343,
+        "y": 243
      },
      "width": 114,
      "height": 126,
@ -484,7 +484,7 @@
      "id": "aa.mm",
      "type": "cylinder",
      "pos": {
-        "x": 446,
+        "x": 348,
        "y": 87
      },
      "width": 131,
@ -524,11 +524,11 @@
      "id": "aa.nn",
      "type": "text",
      "pos": {
-        "x": 408,
-        "y": 138
+        "x": 499,
+        "y": 139
      },
-      "width": 18,
-      "height": 24,
+      "width": 16,
+      "height": 21,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
@ -552,10 +552,10 @@
      "language": "",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
-      "labelWidth": 18,
-      "labelHeight": 24,
+      "labelWidth": 16,
+      "labelHeight": 21,
      "zIndex": 0,
      "level": 2
    },
@ -563,7 +563,7 @@
      "id": "aa.oo",
      "type": "",
      "pos": {
-        "x": 597,
+        "x": 535,
        "y": 87
      },
      "width": 123,
@ -627,11 +627,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 584,
+          "x": 439.33333333333326,
          "y": 1117
        },
        {
-          "x": 584,
+          "x": 439.3333333333332,
          "y": 1258
        }
      ],
@ -666,12 +666,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 581.1666666666666,
-          "y": 1282
+          "x": 442.1666666666666,
+          "y": 1279
        },
        {
-          "x": 581.1666666666666,
-          "y": 1343
+          "x": 442.16666666666663,
+          "y": 1340
        }
      ],
      "animated": false,
@ -705,19 +705,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 541,
-          "y": 796
-        },
-        {
-          "x": 540.6666666666666,
+          "x": 359,
          "y": 816
        },
        {
-          "x": 439,
-          "y": 816
+          "x": 358.66666666666663,
+          "y": 826
        },
        {
-          "x": 439.00000000000006,
+          "x": 431.33333333333326,
+          "y": 826
+        },
+        {
+          "x": 431.33333333333326,
          "y": 916
        }
      ],
@ -752,20 +752,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 422.9000000000001,
-          "y": 359
+          "x": 411.9,
+          "y": 369
        },
        {
-          "x": 422.9000000000001,
-          "y": 420
+          "x": 411.9,
+          "y": 389
        },
        {
-          "x": 333.00000000000006,
-          "y": 420
+          "x": 659.3333333333333,
+          "y": 389
        },
        {
-          "x": 333.00000000000006,
-          "y": 445
+          "x": 659.3333333333333,
+          "y": 465
        }
      ],
      "animated": false,
@ -799,27 +799,35 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 551,
+          "x": 453,
          "y": 209
        },
        {
-          "x": 550.5,
-          "y": 420
+          "x": 452.9,
+          "y": 223
        },
        {
-          "x": 639,
-          "y": 420
+          "x": 716.8333333333333,
+          "y": 223
        },
        {
-          "x": 639,
+          "x": 716.8333333333333,
+          "y": 450
+        },
+        {
+          "x": 689.3333333333333,
+          "y": 450
+        },
+        {
+          "x": 689.3333333333333,
          "y": 826
        },
        {
-          "x": 449.00000000000006,
+          "x": 679.3333333333333,
          "y": 826
        },
        {
-          "x": 449.00000000000006,
+          "x": 679.3333333333333,
          "y": 841
        }
      ],
@ -854,20 +862,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 472,
-          "y": 209
+          "x": 400,
+          "y": 213
        },
        {
-          "x": 471.90000000000003,
-          "y": 223
-        },
-        {
-          "x": 411.50000000000006,
-          "y": 223
-        },
-        {
-          "x": 411.50000000000006,
-          "y": 233
+          "x": 400.49999999999994,
+          "y": 243
        }
      ],
      "animated": false,
@ -901,28 +901,28 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 524,
+          "x": 427,
          "y": 213
        },
        {
-          "x": 524.3000000000001,
-          "y": 223
+          "x": 426.69999999999993,
+          "y": 233
        },
        {
-          "x": 523.5,
-          "y": 223
+          "x": 689.8333333333333,
+          "y": 233
        },
        {
-          "x": 523.5,
-          "y": 420
+          "x": 689.8333333333333,
+          "y": 440
        },
        {
-          "x": 506.50000000000006,
-          "y": 420
+          "x": 679.3333333333333,
+          "y": 440
        },
        {
-          "x": 506.50000000000006,
-          "y": 445
+          "x": 679.3333333333333,
+          "y": 465
        }
      ],
      "animated": false,
@ -956,27 +956,35 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 445.70000000000005,
-          "y": 359
+          "x": 434.69999999999993,
+          "y": 369
        },
        {
-          "x": 445.70000000000005,
+          "x": 434.69999999999993,
+          "y": 379
+        },
+        {
+          "x": 678.8333333333333,
+          "y": 379
+        },
+        {
+          "x": 678.8333333333333,
          "y": 430
        },
        {
-          "x": 353.00000000000006,
+          "x": 669.3333333333333,
          "y": 430
        },
        {
-          "x": 353.00000000000006,
+          "x": 669.3333333333333,
          "y": 1248
        },
        {
-          "x": 578.3333333333334,
+          "x": 445,
          "y": 1248
        },
        {
-          "x": 578.3333333333334,
+          "x": 445,
          "y": 1258
        }
      ],
@ -1011,20 +1019,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 498,
-          "y": 213
+          "x": 374,
+          "y": 209
        },
        {
-          "x": 498.1,
+          "x": 374.29999999999995,
          "y": 223
        },
        {
-          "x": 496.50000000000006,
+          "x": 314.49999999999994,
          "y": 223
        },
        {
-          "x": 497,
-          "y": 575
+          "x": 314,
+          "y": 540
        }
      ],
      "animated": false,
@ -1058,28 +1066,36 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 449,
-          "y": 1544
+          "x": 356.33333333333326,
+          "y": 1541
        },
        {
-          "x": 449.0000000000001,
-          "y": 1644
+          "x": 356.33333333333326,
+          "y": 1641
        },
        {
-          "x": 95.00000000000011,
-          "y": 1644
+          "x": 87,
+          "y": 1641
        },
        {
-          "x": 95.00000000000011,
+          "x": 87,
+          "y": 430
+        },
+        {
+          "x": 333.49999999999994,
+          "y": 430
+        },
+        {
+          "x": 333.49999999999994,
+          "y": 379
+        },
+        {
+          "x": 366.29999999999995,
+          "y": 379
+        },
+        {
+          "x": 366.29999999999995,
          "y": 369
-        },
-        {
-          "x": 377.3000000000001,
-          "y": 369
-        },
-        {
-          "x": 377.3000000000001,
-          "y": 359
        }
      ],
      "animated": false,
@ -1113,36 +1129,28 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 452,
-          "y": 796
+          "x": 270,
+          "y": 816
        },
        {
-          "x": 452.3333333333333,
-          "y": 806
+          "x": 270.33333333333326,
+          "y": 1631
        },
        {
-          "x": 267,
-          "y": 806
+          "x": 97,
+          "y": 1631
        },
        {
-          "x": 267.0000000000001,
-          "y": 1634
+          "x": 97,
+          "y": 440
        },
        {
-          "x": 122.00000000000011,
-          "y": 1634
+          "x": 389.09999999999997,
+          "y": 440
        },
        {
-          "x": 122.00000000000011,
-          "y": 379
-        },
-        {
-          "x": 400.10000000000014,
-          "y": 379
-        },
-        {
-          "x": 400.10000000000014,
-          "y": 359
+          "x": 389.09999999999997,
+          "y": 369
        }
      ],
      "animated": false,
--- a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/class/dagre/board.exp.json
+++ b/e2etests/testdata/stable/class/dagre/board.exp.json
@ -9,14 +9,14 @@
        "x": 0,
        "y": 0
      },
-      "width": 339,
+      "width": 422,
      "height": 368,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
      "borderRadius": 0,
-      "fill": "#FFFFFF",
-      "stroke": "#0A0F25",
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
      "shadow": false,
      "3d": false,
      "multiple": false,
@ -68,10 +68,13 @@
      "italic": false,
      "bold": false,
      "underline": false,
-      "labelWidth": 150,
+      "labelWidth": 175,
      "labelHeight": 36,
      "zIndex": 0,
-      "level": 1
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
    }
  ],
  "connections": []
--- a/e2etests/testdata/stable/class/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/class/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/class/elk/board.exp.json
+++ b/e2etests/testdata/stable/class/elk/board.exp.json
@ -9,14 +9,14 @@
        "x": 12,
        "y": 12
      },
-      "width": 339,
+      "width": 422,
      "height": 368,
      "opacity": 1,
      "strokeDash": 0,
      "strokeWidth": 2,
      "borderRadius": 0,
-      "fill": "#FFFFFF",
-      "stroke": "#0A0F25",
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
      "shadow": false,
      "3d": false,
      "multiple": false,
@ -68,10 +68,13 @@
      "italic": false,
      "bold": false,
      "underline": false,
-      "labelWidth": 150,
+      "labelWidth": 175,
      "labelHeight": 36,
      "zIndex": 0,
-      "level": 1
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
    }
  ],
  "connections": []
--- a/e2etests/testdata/stable/class/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/class/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/code_snippet/elk/board.exp.json
+++ b/e2etests/testdata/stable/code_snippet/elk/board.exp.json
@ -85,7 +85,7 @@
      "id": "y",
      "type": "",
      "pos": {
-        "x": 333,
+        "x": 332,
        "y": 504
      },
      "width": 114,
--- a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
@ -26,7 +26,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)" mask="url(#4046676353)"/></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(#4046676353)"/></g><mask id="4046676353" maskUnits="userSpaceOnUse" x="-100" y="-100" width="955" height="818">
+</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="332" y="504" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="389.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(#1364404966)"/></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(#1364404966)"/></g><mask id="1364404966" maskUnits="userSpaceOnUse" x="-100" y="-100" width="955" height="818">
 <rect x="-100" y="-100" width="955" height="818" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/connected_container/elk/board.exp.json
+++ b/e2etests/testdata/stable/connected_container/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 88,
+        "x": 87,
        "y": 12
      },
      "width": 263,
@ -46,7 +46,7 @@
      "id": "a.b",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 87
      },
      "width": 113,
--- a/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
@ -18,7 +18,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" 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" 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" 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" 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(#1997561525)"/></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(#1997561525)"/></g><mask id="1997561525" maskUnits="userSpaceOnUse" x="-100" y="-100" width="614" height="1403">
+</style><g id="a"><g class="shape" ><rect x="87" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.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" 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" 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="162" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.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" 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(#349145811)"/></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(#349145811)"/></g><mask id="349145811" maskUnits="userSpaceOnUse" x="-100" y="-100" width="614" height="1403">
 <rect x="-100" y="-100" width="614" height="1403" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/constant_near_stress/dagre/board.exp.json
+++ b/e2etests/testdata/stable/constant_near_stress/dagre/board.exp.json
@ -0,0 +1,456 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "",
+      "pos": {
+        "x": 1,
+        "y": 0
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "y",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 226
+      },
+      "width": 114,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "y",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 14,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "The top of the mountain",
+      "type": "text",
+      "pos": {
+        "x": -24,
+        "y": -41
+      },
+      "width": 162,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "The top of the mountain",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 162,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Joe",
+      "type": "person",
+      "pos": {
+        "x": -151,
+        "y": 113
+      },
+      "width": 131,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Joe",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 31,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Donald",
+      "type": "person",
+      "pos": {
+        "x": 134,
+        "y": 113
+      },
+      "width": 155,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Donald",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 55,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "bottom",
+      "type": "text",
+      "pos": {
+        "x": -414,
+        "y": 372
+      },
+      "width": 943,
+      "height": 130,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "# Cats, no less liquid than their shadows, offer no angles to the wind.\n\nIf we can't fix it, it ain't broke.\n\nDieters live life in the fasting lane.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 943,
+      "labelHeight": 130,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am top left",
+      "type": "text",
+      "pos": {
+        "x": -514,
+        "y": -41
+      },
+      "width": 80,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i am top left",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 80,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am top right",
+      "type": "text",
+      "pos": {
+        "x": 548,
+        "y": -41
+      },
+      "width": 90,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i am top right",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 90,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am bottom left",
+      "type": "text",
+      "pos": {
+        "x": -541,
+        "y": 372
+      },
+      "width": 107,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i am bottom left",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 107,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am bottom right",
+      "type": "text",
+      "pos": {
+        "x": 548,
+        "y": 372
+      },
+      "width": 117,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i am bottom right",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 117,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(x -> y)[0]",
+      "src": "x",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "y",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 57,
+          "y": 126
+        },
+        {
+          "x": 57,
+          "y": 166
+        },
+        {
+          "x": 57,
+          "y": 186
+        },
+        {
+          "x": 57,
+          "y": 226
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
--- a/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/constant_near_stress/elk/board.exp.json
+++ b/e2etests/testdata/stable/constant_near_stress/elk/board.exp.json
@ -0,0 +1,447 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "y",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 238
+      },
+      "width": 114,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "y",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 14,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "The top of the mountain",
+      "type": "text",
+      "pos": {
+        "x": -12,
+        "y": -29
+      },
+      "width": 162,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "The top of the mountain",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 162,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Joe",
+      "type": "person",
+      "pos": {
+        "x": -139,
+        "y": 125
+      },
+      "width": 131,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Joe",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 31,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "Donald",
+      "type": "person",
+      "pos": {
+        "x": 146,
+        "y": 125
+      },
+      "width": 155,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Donald",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 55,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "bottom",
+      "type": "text",
+      "pos": {
+        "x": -402,
+        "y": 384
+      },
+      "width": 943,
+      "height": 130,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "# Cats, no less liquid than their shadows, offer no angles to the wind.\n\nIf we can't fix it, it ain't broke.\n\nDieters live life in the fasting lane.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 943,
+      "labelHeight": 130,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am top left",
+      "type": "text",
+      "pos": {
+        "x": -502,
+        "y": -29
+      },
+      "width": 80,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i am top left",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 80,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am top right",
+      "type": "text",
+      "pos": {
+        "x": 560,
+        "y": -29
+      },
+      "width": 90,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i am top right",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 90,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am bottom left",
+      "type": "text",
+      "pos": {
+        "x": -529,
+        "y": 384
+      },
+      "width": 107,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i am bottom left",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 107,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am bottom right",
+      "type": "text",
+      "pos": {
+        "x": 560,
+        "y": 384
+      },
+      "width": 117,
+      "height": 21,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i am bottom right",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 117,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(x -> y)[0]",
+      "src": "x",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "y",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 69,
+          "y": 138
+        },
+        {
+          "x": 69,
+          "y": 238
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
--- a/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/constant_near_title/dagre/board.exp.json
+++ b/e2etests/testdata/stable/constant_near_title/dagre/board.exp.json
@ -0,0 +1,500 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "poll the people",
+      "type": "",
+      "pos": {
+        "x": 112,
+        "y": 0
+      },
+      "width": 210,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "poll the people",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 110,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "results",
+      "type": "",
+      "pos": {
+        "x": 241,
+        "y": 226
+      },
+      "width": 153,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "results",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 53,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "unfavorable",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 452
+      },
+      "width": 191,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "unfavorable",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 91,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "favorable",
+      "type": "",
+      "pos": {
+        "x": 251,
+        "y": 452
+      },
+      "width": 173,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "favorable",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 73,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "will of the people",
+      "type": "",
+      "pos": {
+        "x": 224,
+        "y": 678
+      },
+      "width": 227,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "will of the people",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 127,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "pos": {
+        "x": 92,
+        "y": -70
+      },
+      "width": 266,
+      "height": 50,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "# A winning strategy",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 266,
+      "labelHeight": 50,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(poll the people -> results)[0]",
+      "src": "poll the people",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "results",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 272.80973451327435,
+          "y": 126
+        },
+        {
+          "x": 308.5619469026549,
+          "y": 166
+        },
+        {
+          "x": 317.5,
+          "y": 186
+        },
+        {
+          "x": 317.5,
+          "y": 226
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(results -> unfavorable)[0]",
+      "src": "results",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "unfavorable",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 250.03982300884957,
+          "y": 352
+        },
+        {
+          "x": 207.2079646017699,
+          "y": 392
+        },
+        {
+          "x": 187.5,
+          "y": 412
+        },
+        {
+          "x": 151.5,
+          "y": 452
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(unfavorable -> poll the people)[0]",
+      "src": "unfavorable",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "poll the people",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 84.34955752212389,
+          "y": 452
+        },
+        {
+          "x": 77.26991150442478,
+          "y": 412
+        },
+        {
+          "x": 75.5,
+          "y": 379.4
+        },
+        {
+          "x": 75.5,
+          "y": 345.5
+        },
+        {
+          "x": 75.5,
+          "y": 311.6
+        },
+        {
+          "x": 87.9,
+          "y": 166
+        },
+        {
+          "x": 137.5,
+          "y": 126
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(results -> favorable)[0]",
+      "src": "results",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "favorable",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 328.6504424778761,
+          "y": 352
+        },
+        {
+          "x": 335.7300884955752,
+          "y": 392
+        },
+        {
+          "x": 337.5,
+          "y": 412
+        },
+        {
+          "x": 337.5,
+          "y": 452
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(favorable -> will of the people)[0]",
+      "src": "favorable",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "will of the people",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 337.5,
+          "y": 578
+        },
+        {
+          "x": 337.5,
+          "y": 618
+        },
+        {
+          "x": 337.5,
+          "y": 638
+        },
+        {
+          "x": 337.5,
+          "y": 678
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
--- a/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/constant_near_title/elk/board.exp.json
+++ b/e2etests/testdata/stable/constant_near_title/elk/board.exp.json
@ -0,0 +1,459 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "poll the people",
+      "type": "",
+      "pos": {
+        "x": 81,
+        "y": 12
+      },
+      "width": 210,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "poll the people",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 110,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "results",
+      "type": "",
+      "pos": {
+        "x": 74,
+        "y": 238
+      },
+      "width": 153,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "results",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 53,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "unfavorable",
+      "type": "",
+      "pos": {
+        "x": 232,
+        "y": 464
+      },
+      "width": 191,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "unfavorable",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 91,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "favorable",
+      "type": "",
+      "pos": {
+        "x": 39,
+        "y": 464
+      },
+      "width": 173,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "favorable",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 73,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "will of the people",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 690
+      },
+      "width": 227,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "will of the people",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 127,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "pos": {
+        "x": 84,
+        "y": -58
+      },
+      "width": 266,
+      "height": 50,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "#0A0F25",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "# A winning strategy",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 266,
+      "labelHeight": 50,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(poll the people -> results)[0]",
+      "src": "poll the people",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "results",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 151,
+          "y": 138
+        },
+        {
+          "x": 151,
+          "y": 238
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(results -> unfavorable)[0]",
+      "src": "results",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "unfavorable",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 176.5,
+          "y": 364
+        },
+        {
+          "x": 176.5,
+          "y": 414
+        },
+        {
+          "x": 295.6666666666667,
+          "y": 414
+        },
+        {
+          "x": 295.6666666666667,
+          "y": 464
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(unfavorable -> poll the people)[0]",
+      "src": "unfavorable",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "poll the people",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 359.3333333333333,
+          "y": 464
+        },
+        {
+          "x": 359.3333333333333,
+          "y": 188
+        },
+        {
+          "x": 221,
+          "y": 188
+        },
+        {
+          "x": 221,
+          "y": 138
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(results -> favorable)[0]",
+      "src": "results",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "favorable",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 125.5,
+          "y": 364
+        },
+        {
+          "x": 125.5,
+          "y": 464
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(favorable -> will of the people)[0]",
+      "src": "favorable",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "will of the people",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 125.5,
+          "y": 590
+        },
+        {
+          "x": 125.5,
+          "y": 690
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
--- a/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/dense/elk/board.exp.json
+++ b/e2etests/testdata/stable/dense/elk/board.exp.json
@ -6,8 +6,8 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 449,
-        "y": 238
+        "x": 537,
+        "y": 248
      },
      "width": 113,
      "height": 126,
@ -46,7 +46,7 @@
      "id": "b",
      "type": "",
      "pos": {
-        "x": 420,
+        "x": 537,
        "y": 474
      },
      "width": 113,
@ -86,8 +86,8 @@
      "id": "c",
      "type": "",
      "pos": {
-        "x": 316,
-        "y": 238
+        "x": 404,
+        "y": 248
      },
      "width": 113,
      "height": 126,
@ -126,8 +126,8 @@
      "id": "d",
      "type": "",
      "pos": {
-        "x": 428,
-        "y": 720
+        "x": 443,
+        "y": 740
      },
      "width": 114,
      "height": 126,
@ -166,8 +166,8 @@
      "id": "e",
      "type": "",
      "pos": {
-        "x": 533,
-        "y": 1202
+        "x": 406,
+        "y": 1222
      },
      "width": 113,
      "height": 126,
@ -206,8 +206,8 @@
      "id": "f",
      "type": "",
      "pos": {
-        "x": 73,
-        "y": 946
+        "x": 140,
+        "y": 986
      },
      "width": 111,
      "height": 126,
@ -246,8 +246,8 @@
      "id": "g",
      "type": "",
      "pos": {
-        "x": 23,
-        "y": 720
+        "x": 157,
+        "y": 740
      },
      "width": 114,
      "height": 126,
@ -286,8 +286,8 @@
      "id": "h",
      "type": "",
      "pos": {
-        "x": 562,
-        "y": 720
+        "x": 23,
+        "y": 740
      },
      "width": 113,
      "height": 126,
@ -326,8 +326,8 @@
      "id": "i",
      "type": "",
      "pos": {
-        "x": 384,
-        "y": 1428
+        "x": 257,
+        "y": 1448
      },
      "width": 109,
      "height": 126,
@ -366,7 +366,7 @@
      "id": "j",
      "type": "",
      "pos": {
-        "x": 317,
+        "x": 577,
        "y": 12
      },
      "width": 110,
@ -406,8 +406,8 @@
      "id": "k",
      "type": "",
      "pos": {
-        "x": 382,
-        "y": 1654
+        "x": 255,
+        "y": 1674
      },
      "width": 113,
      "height": 126,
@ -446,8 +446,8 @@
      "id": "l",
      "type": "",
      "pos": {
-        "x": 297,
-        "y": 946
+        "x": 474,
+        "y": 986
      },
      "width": 109,
      "height": 126,
@ -486,8 +486,8 @@
      "id": "m",
      "type": "",
      "pos": {
-        "x": 158,
-        "y": 720
+        "x": 291,
+        "y": 740
      },
      "width": 117,
      "height": 126,
@ -526,8 +526,8 @@
      "id": "n",
      "type": "",
      "pos": {
-        "x": 400,
-        "y": 1202
+        "x": 273,
+        "y": 1222
      },
      "width": 113,
      "height": 126,
@ -566,8 +566,8 @@
      "id": "o",
      "type": "",
      "pos": {
-        "x": 695,
-        "y": 720
+        "x": 577,
+        "y": 740
      },
      "width": 114,
      "height": 126,
@ -606,8 +606,8 @@
      "id": "p",
      "type": "",
      "pos": {
-        "x": 295,
-        "y": 720
+        "x": 711,
+        "y": 740
      },
      "width": 113,
      "height": 126,
@ -646,8 +646,8 @@
      "id": "q",
      "type": "",
      "pos": {
-        "x": 533,
-        "y": 1428
+        "x": 406,
+        "y": 1448
      },
      "width": 114,
      "height": 126,
@ -710,11 +710,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 505.17857142857144,
-          "y": 364
+          "x": 593.6428571428572,
+          "y": 374
        },
        {
-          "x": 505.17857142857144,
+          "x": 593.6428571428572,
          "y": 474
        }
      ],
@ -749,19 +749,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 372.17857142857144,
-          "y": 364
+          "x": 460.6428571428572,
+          "y": 374
        },
        {
-          "x": 372.17857142857144,
-          "y": 414
+          "x": 460.6428571428572,
+          "y": 424
        },
        {
-          "x": 476.92857142857144,
-          "y": 414
+          "x": 565.3928571428572,
+          "y": 424
        },
        {
-          "x": 476.92857142857144,
+          "x": 565.3928571428572,
          "y": 474
        }
      ],
@ -796,20 +796,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 513.5,
-          "y": 846
+          "x": 500.00000000000006,
+          "y": 866
        },
        {
-          "x": 513.5,
-          "y": 896
+          "x": 500.00000000000006,
+          "y": 926
        },
        {
-          "x": 618,
-          "y": 896
+          "x": 463.00000000000006,
+          "y": 926
        },
        {
-          "x": 618,
-          "y": 1202
+          "x": 463.00000000000006,
+          "y": 1222
        }
      ],
      "animated": false,
@ -843,20 +843,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 147,
-          "y": 1072
+          "x": 214,
+          "y": 1112
        },
        {
-          "x": 147,
-          "y": 1142
+          "x": 214,
+          "y": 1162
        },
        {
-          "x": 561.5,
-          "y": 1142
+          "x": 434.75000000000006,
+          "y": 1162
        },
        {
-          "x": 561.5,
-          "y": 1202
+          "x": 434.75000000000006,
+          "y": 1222
        }
      ],
      "animated": false,
@ -890,20 +890,28 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 468.8571428571429,
+          "x": 585.5714285714287,
          "y": 600
        },
        {
-          "x": 468.8571428571429,
+          "x": 585.5714285714287,
          "y": 670
        },
        {
-          "x": 147,
+          "x": 146,
          "y": 670
        },
        {
-          "x": 147,
-          "y": 946
+          "x": 146,
+          "y": 916
+        },
+        {
+          "x": 177,
+          "y": 916
+        },
+        {
+          "x": 177,
+          "y": 986
        }
      ],
      "animated": false,
@ -937,20 +945,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 452.7142857142857,
+          "x": 601.7142857142858,
          "y": 600
        },
        {
-          "x": 452.7142857142857,
-          "y": 660
+          "x": 601.7142857142858,
+          "y": 680
        },
        {
-          "x": 80,
-          "y": 660
+          "x": 214,
+          "y": 680
        },
        {
-          "x": 80,
-          "y": 720
+          "x": 214,
+          "y": 740
        }
      ],
      "animated": false,
@ -984,20 +992,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 80,
-          "y": 846
+          "x": 214,
+          "y": 866
        },
        {
-          "x": 80,
-          "y": 896
-        },
-        {
-          "x": 110,
-          "y": 896
-        },
-        {
-          "x": 110,
-          "y": 946
+          "x": 214,
+          "y": 986
        }
      ],
      "animated": false,
@ -1031,20 +1031,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 501.1428571428571,
+          "x": 569.4285714285716,
          "y": 600
        },
        {
-          "x": 501.1428571428571,
+          "x": 569.4285714285716,
          "y": 660
        },
        {
-          "x": 618.5,
+          "x": 79.5,
          "y": 660
        },
        {
-          "x": 618.5,
-          "y": 720
+          "x": 79.5,
+          "y": 740
        }
      ],
      "animated": false,
@ -1078,11 +1078,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 436.57142857142856,
+          "x": 553.2857142857143,
          "y": 600
        },
        {
-          "x": 436.57142857142856,
+          "x": 553.2857142857143,
          "y": 650
        },
        {
@ -1091,15 +1091,15 @@
        },
        {
          "x": 12,
-          "y": 1378
+          "y": 1398
        },
        {
-          "x": 420.4166666666667,
-          "y": 1378
+          "x": 293.6666666666667,
+          "y": 1398
        },
        {
-          "x": 420.4166666666667,
-          "y": 1428
+          "x": 293.6666666666667,
+          "y": 1448
        }
      ],
      "animated": false,
@ -1133,12 +1133,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 485,
+          "x": 617.8571428571429,
          "y": 600
        },
        {
-          "x": 485,
-          "y": 720
+          "x": 617.8571428571429,
+          "y": 690
+        },
+        {
+          "x": 500.00000000000006,
+          "y": 690
+        },
+        {
+          "x": 500.00000000000006,
+          "y": 740
        }
      ],
      "animated": false,
@ -1172,12 +1180,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 372.17857142857144,
+          "x": 605.1428571428572,
          "y": 138
        },
        {
-          "x": 372.17857142857144,
-          "y": 238
+          "x": 605.1428571428572,
+          "y": 188
+        },
+        {
+          "x": 460.6428571428572,
+          "y": 188
+        },
+        {
+          "x": 460.6428571428572,
+          "y": 248
        }
      ],
      "animated": false,
@ -1211,20 +1227,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 399.67857142857144,
+          "x": 632.6428571428572,
          "y": 138
        },
        {
-          "x": 399.67857142857144,
-          "y": 188
+          "x": 632.6428571428572,
+          "y": 198
        },
        {
-          "x": 505.17857142857144,
-          "y": 188
+          "x": 593.6428571428572,
+          "y": 198
        },
        {
-          "x": 505.17857142857144,
-          "y": 238
+          "x": 593.6428571428572,
+          "y": 248
        }
      ],
      "animated": false,
@ -1258,27 +1274,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 448.67857142857144,
+          "x": 621.8928571428572,
          "y": 474
        },
        {
-          "x": 448.67857142857144,
+          "x": 621.8928571428572,
          "y": 424
        },
        {
-          "x": 304.67857142857144,
+          "x": 660.1428571428572,
          "y": 424
        },
        {
-          "x": 304.67857142857144,
-          "y": 188
-        },
-        {
-          "x": 344.67857142857144,
-          "y": 188
-        },
-        {
-          "x": 344.67857142857144,
+          "x": 660.1428571428572,
          "y": 138
        }
      ],
@ -1313,12 +1321,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 438.58333333333337,
-          "y": 1554
+          "x": 311.83333333333337,
+          "y": 1574
        },
        {
-          "x": 438.58333333333337,
-          "y": 1654
+          "x": 311.83333333333337,
+          "y": 1674
        }
      ],
      "animated": false,
@ -1352,20 +1360,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 456.5,
-          "y": 846
+          "x": 528.5,
+          "y": 866
        },
        {
-          "x": 456.5,
-          "y": 896
-        },
-        {
-          "x": 378.75,
-          "y": 896
-        },
-        {
-          "x": 378.75,
-          "y": 946
+          "x": 528.5,
+          "y": 986
        }
      ],
      "animated": false,
@ -1399,20 +1399,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 351.5,
-          "y": 1072
+          "x": 528.5,
+          "y": 1112
        },
        {
-          "x": 351.5,
-          "y": 1122
+          "x": 528.5,
+          "y": 1162
        },
        {
-          "x": 589.75,
-          "y": 1122
+          "x": 491.25000000000006,
+          "y": 1162
        },
        {
-          "x": 589.75,
-          "y": 1202
+          "x": 491.25000000000006,
+          "y": 1222
        }
      ],
      "animated": false,
@ -1446,20 +1446,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 236,
-          "y": 846
+          "x": 369,
+          "y": 866
        },
        {
-          "x": 236,
-          "y": 896
+          "x": 369,
+          "y": 936
        },
        {
-          "x": 324.25,
-          "y": 896
+          "x": 501.25000000000006,
+          "y": 936
        },
        {
-          "x": 324.25,
-          "y": 946
+          "x": 501.25000000000006,
+          "y": 986
        }
      ],
      "animated": false,
@ -1493,20 +1493,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 197,
-          "y": 846
+          "x": 330,
+          "y": 866
        },
        {
-          "x": 197,
-          "y": 1132
-        },
-        {
-          "x": 456.75,
-          "y": 1132
-        },
-        {
-          "x": 456.75,
-          "y": 1202
+          "x": 330,
+          "y": 1222
        }
      ],
      "animated": false,
@ -1540,12 +1532,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 456.75,
-          "y": 1328
+          "x": 330,
+          "y": 1348
        },
        {
-          "x": 456.75,
-          "y": 1428
+          "x": 330,
+          "y": 1448
        }
      ],
      "animated": false,
@ -1579,12 +1571,28 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 485,
-          "y": 846
+          "x": 471.50000000000006,
+          "y": 866
        },
        {
-          "x": 485,
-          "y": 1202
+          "x": 471.50000000000006,
+          "y": 916
+        },
+        {
+          "x": 452.00000000000006,
+          "y": 916
+        },
+        {
+          "x": 452.00000000000006,
+          "y": 1172
+        },
+        {
+          "x": 358.25,
+          "y": 1172
+        },
+        {
+          "x": 358.25,
+          "y": 1222
        }
      ],
      "animated": false,
@ -1618,20 +1626,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 110,
-          "y": 1072
+          "x": 177,
+          "y": 1112
        },
        {
-          "x": 110,
-          "y": 1152
+          "x": 177,
+          "y": 1172
        },
        {
-          "x": 428.5,
-          "y": 1152
+          "x": 301.75,
+          "y": 1172
        },
        {
-          "x": 428.5,
-          "y": 1202
+          "x": 301.75,
+          "y": 1222
        }
      ],
      "animated": false,
@ -1665,20 +1673,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 517.2857142857142,
+          "x": 634.0000000000001,
          "y": 600
        },
        {
-          "x": 517.2857142857142,
-          "y": 650
-        },
-        {
-          "x": 752,
-          "y": 650
-        },
-        {
-          "x": 752,
-          "y": 720
+          "x": 634.0000000000001,
+          "y": 740
        }
      ],
      "animated": false,
@ -1712,12 +1712,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 351.5,
-          "y": 846
+          "x": 767.5,
+          "y": 866
        },
        {
-          "x": 351.5,
-          "y": 946
+          "x": 767.5,
+          "y": 916
+        },
+        {
+          "x": 555.75,
+          "y": 916
+        },
+        {
+          "x": 555.75,
+          "y": 986
        }
      ],
      "animated": false,
@ -1751,12 +1759,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 589.75,
-          "y": 1328
+          "x": 463.00000000000006,
+          "y": 1348
        },
        {
-          "x": 589.75,
-          "y": 1428
+          "x": 463.00000000000006,
+          "y": 1448
        }
      ],
      "animated": false,
--- a/e2etests/testdata/stable/dense/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/dense/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/different_subgraphs/elk/board.exp.json
+++ b/e2etests/testdata/stable/different_subgraphs/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "finally",
      "type": "",
      "pos": {
-        "x": 843,
+        "x": 591,
        "y": 12
      },
      "width": 458,
@ -46,7 +46,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 57,
+        "x": 76,
        "y": 600
      },
      "width": 113,
@ -86,7 +86,7 @@
      "id": "tree",
      "type": "",
      "pos": {
-        "x": 362,
+        "x": 37,
        "y": 836
      },
      "width": 134,
@ -126,7 +126,7 @@
      "id": "and",
      "type": "",
      "pos": {
-        "x": 179,
+        "x": 343,
        "y": 836
      },
      "width": 132,
@ -166,7 +166,7 @@
      "id": "nodes",
      "type": "",
      "pos": {
-        "x": 12,
+        "x": 495,
        "y": 836
      },
      "width": 147,
@ -206,7 +206,7 @@
      "id": "some",
      "type": "",
      "pos": {
-        "x": 174,
+        "x": 338,
        "y": 1062
      },
      "width": 143,
@ -246,7 +246,7 @@
      "id": "more",
      "type": "",
      "pos": {
-        "x": 337,
+        "x": 12,
        "y": 1062
      },
      "width": 141,
@ -286,7 +286,7 @@
      "id": "many",
      "type": "",
      "pos": {
-        "x": 498,
+        "x": 173,
        "y": 1062
      },
      "width": 145,
@ -326,7 +326,7 @@
      "id": "then",
      "type": "",
      "pos": {
-        "x": 685,
+        "x": 1247,
        "y": 600
      },
      "width": 138,
@ -366,7 +366,7 @@
      "id": "here",
      "type": "",
      "pos": {
-        "x": 709,
+        "x": 1225,
        "y": 836
      },
      "width": 136,
@ -406,7 +406,7 @@
      "id": "you",
      "type": "",
      "pos": {
-        "x": 711,
+        "x": 1227,
        "y": 1062
      },
      "width": 132,
@ -446,7 +446,7 @@
      "id": "have",
      "type": "",
      "pos": {
-        "x": 505,
+        "x": 1427,
        "y": 600
      },
      "width": 138,
@ -486,7 +486,7 @@
      "id": "hierarchy",
      "type": "",
      "pos": {
-        "x": 516,
+        "x": 1381,
        "y": 836
      },
      "width": 173,
@ -526,7 +526,7 @@
      "id": "another",
      "type": "",
      "pos": {
-        "x": 915,
+        "x": 662,
        "y": 836
      },
      "width": 163,
@ -566,7 +566,7 @@
      "id": "of",
      "type": "",
      "pos": {
-        "x": 936,
+        "x": 684,
        "y": 1062
      },
      "width": 120,
@ -606,7 +606,7 @@
      "id": "nesting",
      "type": "",
      "pos": {
-        "x": 1322,
+        "x": 1069,
        "y": 600
      },
      "width": 158,
@ -646,7 +646,7 @@
      "id": "trees",
      "type": "",
      "pos": {
-        "x": 1306,
+        "x": 1053,
        "y": 836
      },
      "width": 142,
@ -686,7 +686,7 @@
      "id": "finally.a",
      "type": "",
      "pos": {
-        "x": 948,
+        "x": 715,
        "y": 233
      },
      "width": 113,
@ -726,7 +726,7 @@
      "id": "finally.tree",
      "type": "",
      "pos": {
-        "x": 1073,
+        "x": 685,
        "y": 379
      },
      "width": 134,
@ -766,7 +766,7 @@
      "id": "finally.inside",
      "type": "",
      "pos": {
-        "x": 930,
+        "x": 697,
        "y": 87
      },
      "width": 148,
@ -806,7 +806,7 @@
      "id": "finally.hierarchy",
      "type": "",
      "pos": {
-        "x": 1054,
+        "x": 666,
        "y": 525
      },
      "width": 173,
@ -846,7 +846,7 @@
      "id": "finally.root",
      "type": "",
      "pos": {
-        "x": 918,
+        "x": 839,
        "y": 379
      },
      "width": 135,
@ -910,19 +910,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 142,
+          "x": 104.83333333333334,
          "y": 726
        },
        {
-          "x": 142,
-          "y": 776
-        },
-        {
-          "x": 429.3333333333333,
-          "y": 776
-        },
-        {
-          "x": 429.3333333333333,
+          "x": 104.83333333333334,
          "y": 836
        }
      ],
@ -957,19 +949,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 113.75,
+          "x": 133.08333333333334,
          "y": 726
        },
        {
-          "x": 113.75,
+          "x": 133.08333333333334,
          "y": 786
        },
        {
-          "x": 245,
+          "x": 409.5,
          "y": 786
        },
        {
-          "x": 245,
+          "x": 409.5,
          "y": 836
        }
      ],
@ -1004,11 +996,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 85.5,
+          "x": 161.33333333333334,
          "y": 726
        },
        {
-          "x": 85.5,
+          "x": 161.33333333333334,
+          "y": 776
+        },
+        {
+          "x": 569,
+          "y": 776
+        },
+        {
+          "x": 569,
          "y": 836
        }
      ],
@ -1043,11 +1043,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 245,
+          "x": 409.5,
          "y": 962
        },
        {
-          "x": 245,
+          "x": 409.5,
          "y": 1062
        }
      ],
@ -1082,11 +1082,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 407,
+          "x": 82.5,
          "y": 962
        },
        {
-          "x": 407,
+          "x": 82.5,
          "y": 1062
        }
      ],
@ -1121,19 +1121,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 451.66666666666663,
+          "x": 127.16666666666667,
          "y": 962
        },
        {
-          "x": 451.66666666666663,
+          "x": 127.16666666666667,
          "y": 1012
        },
        {
-          "x": 570,
+          "x": 245.5,
          "y": 1012
        },
        {
-          "x": 570,
+          "x": 245.5,
          "y": 1062
        }
      ],
@ -1168,11 +1168,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 777.3333333333333,
+          "x": 1293.6666666666665,
          "y": 726
        },
        {
-          "x": 777.3333333333333,
+          "x": 1293.6666666666665,
          "y": 836
        }
      ],
@ -1207,11 +1207,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 777.3333333333333,
+          "x": 1293.6666666666665,
          "y": 962
        },
        {
-          "x": 777.3333333333333,
+          "x": 1293.6666666666665,
          "y": 1062
        }
      ],
@ -1246,11 +1246,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 574,
+          "x": 1496.9999999999998,
          "y": 726
        },
        {
-          "x": 574,
+          "x": 1496.9999999999998,
          "y": 836
        }
      ],
@ -1285,19 +1285,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 731.3333333333333,
+          "x": 1339.6666666666665,
          "y": 726
        },
        {
-          "x": 731.3333333333333,
+          "x": 1339.6666666666665,
          "y": 776
        },
        {
-          "x": 631.6666666666666,
+          "x": 1439.3333333333333,
          "y": 776
        },
        {
-          "x": 631.6666666666666,
+          "x": 1439.3333333333333,
          "y": 836
        }
      ],
@ -1332,11 +1332,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 996.1666666666666,
+          "x": 744,
          "y": 726
        },
        {
-          "x": 996.1666666666666,
+          "x": 744,
          "y": 836
        }
      ],
@ -1371,11 +1371,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 996.1666666666666,
+          "x": 744,
          "y": 962
        },
        {
-          "x": 996.1666666666666,
+          "x": 744,
          "y": 1062
        }
      ],
@ -1410,11 +1410,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1400.8333333333333,
+          "x": 1148.6666666666665,
          "y": 726
        },
        {
-          "x": 1400.8333333333333,
+          "x": 1148.6666666666665,
          "y": 836
        }
      ],
@ -1449,19 +1449,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1149,
+          "x": 896.8333333333333,
          "y": 726
        },
        {
-          "x": 1149,
+          "x": 896.8333333333333,
          "y": 776
        },
        {
-          "x": 1353.4999999999998,
+          "x": 1101.333333333333,
          "y": 776
        },
        {
-          "x": 1353.4999999999998,
+          "x": 1101.333333333333,
          "y": 836
        }
      ],
@ -1496,19 +1496,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1023.1666666666667,
+          "x": 752.6666666666666,
          "y": 359
        },
        {
-          "x": 1023.1666666666667,
-          "y": 369
-        },
-        {
-          "x": 1140,
-          "y": 369
-        },
-        {
-          "x": 1140,
+          "x": 752.6666666666666,
          "y": 379
        }
      ],
@ -1543,11 +1535,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1004.3333333333333,
+          "x": 771.5,
          "y": 213
        },
        {
-          "x": 1004.3333333333333,
+          "x": 771.5,
          "y": 233
        }
      ],
@ -1582,11 +1574,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1140,
+          "x": 752.6666666666666,
          "y": 505
        },
        {
-          "x": 1140,
+          "x": 752.6666666666666,
          "y": 525
        }
      ],
@ -1621,11 +1613,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 985.5,
+          "x": 790.3333333333333,
          "y": 359
        },
        {
-          "x": 985.5,
+          "x": 790.3333333333333,
+          "y": 369
+        },
+        {
+          "x": 907.1666666666666,
+          "y": 369
+        },
+        {
+          "x": 907.1666666666666,
          "y": 379
        }
      ],
--- a/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/direction/elk/board.exp.json
+++ b/e2etests/testdata/stable/direction/elk/board.exp.json
@ -86,7 +86,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 12
      },
      "width": 113,
@ -126,7 +126,7 @@
      "id": "c",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 1932
      },
      "width": 113,
@ -206,7 +206,7 @@
      "id": "e",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 2384
      },
      "width": 113,
@ -286,7 +286,7 @@
      "id": "b.3",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 1339
      },
      "width": 113,
@ -366,7 +366,7 @@
      "id": "b.5",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 1631
      },
      "width": 113,
@ -406,7 +406,7 @@
      "id": "b.2.a",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 534
      },
      "width": 113,
@ -446,7 +446,7 @@
      "id": "b.2.b",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 680
      },
      "width": 113,
@ -486,7 +486,7 @@
      "id": "b.2.c",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 826
      },
      "width": 113,
@ -566,7 +566,7 @@
      "id": "b.2.e",
      "type": "",
      "pos": {
-        "x": 163,
+        "x": 162,
        "y": 1118
      },
      "width": 113,
--- a/e2etests/testdata/stable/direction/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/direction/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/font_colors/elk/board.exp.json
+++ b/e2etests/testdata/stable/font_colors/elk/board.exp.json
@ -46,7 +46,7 @@
      "id": "beta",
      "type": "",
      "pos": {
-        "x": 17,
+        "x": 16,
        "y": 359
      },
      "width": 136,
--- a/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
@ -18,7 +18,7 @@ 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><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(#2688269051)"/><text class="text-italic" x="85.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="2688269051" maskUnits="userSpaceOnUse" x="-100" y="-100" width="345" height="673">
+</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="16" y="359" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="84.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(#1137835220)"/><text class="text-italic" x="85.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="1137835220" maskUnits="userSpaceOnUse" x="-100" y="-100" width="345" height="673">
 <rect x="-100" y="-100" width="345" height="673" fill="white"></rect>
 <rect x="59.000000" y="238.000000" width="52" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/font_sizes/elk/board.exp.json
+++ b/e2etests/testdata/stable/font_sizes/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "size XS",
      "type": "",
      "pos": {
-        "x": 1465,
+        "x": 1104,
        "y": 419
      },
      "width": 145,
@ -46,7 +46,7 @@
      "id": "size S",
      "type": "",
      "pos": {
-        "x": 1634,
+        "x": 15,
        "y": 35
      },
      "width": 140,
@ -86,7 +86,7 @@
      "id": "size M",
      "type": "",
      "pos": {
-        "x": 1630,
+        "x": 12,
        "y": 419
      },
      "width": 147,
@ -126,8 +126,8 @@
      "id": "size L",
      "type": "",
      "pos": {
-        "x": 1116,
-        "y": 20
+        "x": 175,
+        "y": 19
      },
      "width": 153,
      "height": 131,
@ -166,7 +166,7 @@
      "id": "size XL",
      "type": "",
      "pos": {
-        "x": 12,
+        "x": 348,
        "y": 17
      },
      "width": 177,
@ -206,8 +206,8 @@
      "id": "size XXL",
      "type": "",
      "pos": {
-        "x": 429,
-        "y": 15
+        "x": 545,
+        "y": 14
      },
      "width": 204,
      "height": 141,
@ -246,7 +246,7 @@
      "id": "size XXXL",
      "type": "",
      "pos": {
-        "x": 653,
+        "x": 769,
        "y": 12
      },
      "width": 237,
@ -286,7 +286,7 @@
      "id": "custom 8",
      "type": "",
      "pos": {
-        "x": 1469,
+        "x": 1108,
        "y": 42
      },
      "width": 137,
@ -326,8 +326,8 @@
      "id": "custom 12",
      "type": "",
      "pos": {
-        "x": 1289,
-        "y": 25
+        "x": 1265,
+        "y": 24
      },
      "width": 160,
      "height": 121,
@ -366,7 +366,7 @@
      "id": "custom 18",
      "type": "",
      "pos": {
-        "x": 910,
+        "x": 1445,
        "y": 21
      },
      "width": 186,
@ -406,7 +406,7 @@
      "id": "custom 21",
      "type": "",
      "pos": {
-        "x": 209,
+        "x": 1651,
        "y": 19
      },
      "width": 200,
@ -446,7 +446,7 @@
      "id": "custom 64",
      "type": "",
      "pos": {
-        "x": 575,
+        "x": 691,
        "y": 419
      },
      "width": 393,
@ -510,11 +510,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1537.5,
+          "x": 1177,
          "y": 158
        },
        {
-          "x": 1537.5,
+          "x": 1177,
          "y": 419
        }
      ],
@ -549,11 +549,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 1703.5,
+          "x": 85.5,
          "y": 158
        },
        {
-          "x": 1703.5,
+          "x": 85.5,
          "y": 419
        }
      ],
@ -589,11 +589,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 771.5,
+          "x": 888,
          "y": 158
        },
        {
-          "x": 771.5,
+          "x": 888,
          "y": 419
        }
      ],
--- a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/giant_markdown_test/dagre/board.exp.json
+++ b/e2etests/testdata/stable/giant_markdown_test/dagre/board.exp.json
@ -34,7 +34,7 @@
      "language": "markdown",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
      "labelWidth": 3051,
      "labelHeight": 4848,
--- a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
@ -277,6 +277,7 @@ width="3251" height="5500" viewBox="-100 -100 3251 5500"><style type="text/css">
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
+  font-family: "font-regular";
 }

 .md h2 {
@ -1031,7 +1032,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)" mask="url(#3004641400)"/></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(#3004641400)"/></g><mask id="3004641400" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3251" height="5500">
+</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(#4068872453)"/></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(#4068872453)"/></g><mask id="4068872453" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3251" height="5500">
 <rect x="-100" y="-100" width="3251" height="5500" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/giant_markdown_test/elk/board.exp.json
+++ b/e2etests/testdata/stable/giant_markdown_test/elk/board.exp.json
@ -34,7 +34,7 @@
      "language": "markdown",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
      "labelWidth": 3051,
      "labelHeight": 4848,
--- a/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
@ -277,6 +277,7 @@ width="3251" height="5500" viewBox="-88 -88 3251 5500"><style type="text/css">
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
+  font-family: "font-regular";
 }

 .md h2 {
@ -1031,7 +1032,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)" mask="url(#2933553414)"/></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(#2933553414)"/></g><mask id="2933553414" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3251" height="5500">
+</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(#2511908393)"/></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(#2511908393)"/></g><mask id="2511908393" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3251" height="5500">
 <rect x="-100" y="-100" width="3251" height="5500" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/hr/dagre/board.exp.json
+++ b/e2etests/testdata/stable/hr/dagre/board.exp.json
@ -34,7 +34,7 @@
      "language": "markdown",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
      "labelWidth": 738,
      "labelHeight": 134,
--- a/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
@ -277,6 +277,7 @@ width="938" height="786" viewBox="-100 -100 938 786"><style type="text/css">
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
+  font-family: "font-regular";
 }

 .md h2 {
@ -778,7 +779,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)" mask="url(#255996187)"/></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(#255996187)"/></g><mask id="255996187" maskUnits="userSpaceOnUse" x="-100" y="-100" width="938" height="786">
+</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(#2921353566)"/></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(#2921353566)"/></g><mask id="2921353566" maskUnits="userSpaceOnUse" x="-100" y="-100" width="938" height="786">
 <rect x="-100" y="-100" width="938" height="786" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/hr/elk/board.exp.json
+++ b/e2etests/testdata/stable/hr/elk/board.exp.json
@ -34,7 +34,7 @@
      "language": "markdown",
      "color": "#0A0F25",
      "italic": false,
-      "bold": true,
+      "bold": false,
      "underline": false,
      "labelWidth": 738,
      "labelHeight": 134,
@ -45,7 +45,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 325,
+        "x": 324,
        "y": 12
      },
      "width": 113,
@ -85,7 +85,7 @@
      "id": "b",
      "type": "",
      "pos": {
-        "x": 325,
+        "x": 324,
        "y": 472
      },
      "width": 113,
--- a/e2etests/testdata/stable/hr/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/elk/sketch.exp.svg
@ -277,6 +277,7 @@ width="938" height="786" viewBox="-88 -88 938 786"><style type="text/css">
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
+  font-family: "font-regular";
 }

 .md h2 {
@ -778,7 +779,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)" mask="url(#1468961209)"/></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(#1468961209)"/></g><mask id="1468961209" maskUnits="userSpaceOnUse" x="-100" y="-100" width="938" height="786">
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="324" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="380.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="324" y="472" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="380.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(#2975790206)"/></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(#2975790206)"/></g><mask id="2975790206" maskUnits="userSpaceOnUse" x="-100" y="-100" width="938" height="786">
 <rect x="-100" y="-100" width="938" height="786" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/investigate/elk/board.exp.json
+++ b/e2etests/testdata/stable/investigate/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "aa",
      "type": "step",
      "pos": {
-        "x": 429,
+        "x": 563,
        "y": 12
      },
      "width": 122,
@ -46,7 +46,7 @@
      "id": "bb",
      "type": "step",
      "pos": {
-        "x": 286,
+        "x": 583,
        "y": 238
      },
      "width": 123,
@ -86,7 +86,7 @@
      "id": "cc",
      "type": "step",
      "pos": {
-        "x": 307,
+        "x": 458,
        "y": 464
      },
      "width": 121,
@ -126,7 +126,7 @@
      "id": "dd",
      "type": "",
      "pos": {
-        "x": 231,
+        "x": 240,
        "y": 816
      },
      "width": 415,
@ -166,7 +166,7 @@
      "id": "dd.ee",
      "type": "diamond",
      "pos": {
-        "x": 449,
+        "x": 315,
        "y": 891
      },
      "width": 122,
@ -206,8 +206,8 @@
      "id": "ll",
      "type": "",
      "pos": {
-        "x": 246,
-        "y": 3120
+        "x": 12,
+        "y": 3130
      },
      "width": 425,
      "height": 427,
@ -246,8 +246,8 @@
      "id": "ll.mm",
      "type": "oval",
      "pos": {
-        "x": 465,
-        "y": 3195
+        "x": 87,
+        "y": 3205
      },
      "width": 131,
      "height": 131,
@ -286,8 +286,8 @@
      "id": "ff",
      "type": "",
      "pos": {
-        "x": 247,
-        "y": 2462
+        "x": 12,
+        "y": 2472
      },
      "width": 424,
      "height": 427,
@ -326,8 +326,8 @@
      "id": "ff.mm",
      "type": "oval",
      "pos": {
-        "x": 465,
-        "y": 2537
+        "x": 87,
+        "y": 2547
      },
      "width": 131,
      "height": 131,
@ -366,8 +366,8 @@
      "id": "ff.gg",
      "type": "diamond",
      "pos": {
-        "x": 322,
-        "y": 2539
+        "x": 238,
+        "y": 2548
      },
      "width": 123,
      "height": 126,
@ -406,7 +406,7 @@
      "id": "dd.hh",
      "type": "diamond",
      "pos": {
-        "x": 306,
+        "x": 457,
        "y": 891
      },
      "width": 123,
@ -446,7 +446,7 @@
      "id": "ww",
      "type": "queue",
      "pos": {
-        "x": 120,
+        "x": 431,
        "y": 2195
      },
      "width": 131,
@ -497,8 +497,8 @@
      "id": "yy",
      "type": "",
      "pos": {
-        "x": 68,
-        "y": 3657
+        "x": 383,
+        "y": 3677
      },
      "width": 273,
      "height": 448,
@ -537,8 +537,8 @@
      "id": "yy.zz",
      "type": "queue",
      "pos": {
-        "x": 145,
-        "y": 3732
+        "x": 459,
+        "y": 3752
      },
      "width": 120,
      "height": 152,
@ -588,8 +588,8 @@
      "id": "ad",
      "type": "parallelogram",
      "pos": {
-        "x": 327,
-        "y": 4606
+        "x": 452,
+        "y": 4616
      },
      "width": 123,
      "height": 126,
@ -628,8 +628,8 @@
      "id": "nn",
      "type": "cylinder",
      "pos": {
-        "x": 110,
-        "y": 4225
+        "x": 93,
+        "y": 4235
      },
      "width": 557,
      "height": 276,
@ -668,7 +668,7 @@
      "id": "ii",
      "type": "",
      "pos": {
-        "x": 453,
+        "x": 244,
        "y": 1197
      },
      "width": 114,
@ -708,7 +708,7 @@
      "id": "jj",
      "type": "",
      "pos": {
-        "x": 453,
+        "x": 244,
        "y": 1503
      },
      "width": 115,
@ -748,7 +748,7 @@
      "id": "kk",
      "type": "",
      "pos": {
-        "x": 449,
+        "x": 240,
        "y": 1914
      },
      "width": 122,
@ -788,8 +788,8 @@
      "id": "nn.oo",
      "type": "",
      "pos": {
-        "x": 469,
-        "y": 4300
+        "x": 168,
+        "y": 4310
      },
      "width": 123,
      "height": 126,
@ -828,8 +828,8 @@
      "id": "ff.pp",
      "type": "",
      "pos": {
-        "x": 322,
-        "y": 2688
+        "x": 238,
+        "y": 2698
      },
      "width": 123,
      "height": 126,
@ -868,8 +868,8 @@
      "id": "ll.qq",
      "type": "",
      "pos": {
-        "x": 321,
-        "y": 3198
+        "x": 238,
+        "y": 3207
      },
      "width": 124,
      "height": 126,
@ -908,8 +908,8 @@
      "id": "ll.rr",
      "type": "",
      "pos": {
-        "x": 324,
-        "y": 3346
+        "x": 241,
+        "y": 3356
      },
      "width": 118,
      "height": 126,
@ -948,7 +948,7 @@
      "id": "ss",
      "type": "",
      "pos": {
-        "x": 30,
+        "x": 385,
        "y": 1428
      },
      "width": 268,
@ -988,7 +988,7 @@
      "id": "ss.tt",
      "type": "",
      "pos": {
-        "x": 105,
+        "x": 460,
        "y": 1503
      },
      "width": 118,
@ -1028,7 +1028,7 @@
      "id": "uu",
      "type": "",
      "pos": {
-        "x": 28,
+        "x": 382,
        "y": 1814
      },
      "width": 273,
@ -1068,7 +1068,7 @@
      "id": "uu.vv",
      "type": "",
      "pos": {
-        "x": 103,
+        "x": 457,
        "y": 1889
      },
      "width": 123,
@ -1108,8 +1108,8 @@
      "id": "rm",
      "type": "",
      "pos": {
-        "x": 102,
-        "y": 3321
+        "x": 457,
+        "y": 3330
      },
      "width": 124,
      "height": 126,
@ -1148,8 +1148,8 @@
      "id": "nn.xx",
      "type": "",
      "pos": {
-        "x": 185,
-        "y": 4300
+        "x": 311,
+        "y": 4310
      },
      "width": 122,
      "height": 126,
@ -1188,8 +1188,8 @@
      "id": "yy.ab",
      "type": "",
      "pos": {
-        "x": 143,
-        "y": 3904
+        "x": 458,
+        "y": 3924
      },
      "width": 123,
      "height": 126,
@ -1228,8 +1228,8 @@
      "id": "nn.ac",
      "type": "",
      "pos": {
-        "x": 327,
-        "y": 4300
+        "x": 453,
+        "y": 4310
      },
      "width": 122,
      "height": 126,
@ -1292,19 +1292,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 470,
+          "x": 645,
          "y": 138
        },
        {
-          "x": 469.5,
-          "y": 188
-        },
-        {
-          "x": 347.16666666666663,
-          "y": 188
-        },
-        {
-          "x": 347,
+          "x": 646,
          "y": 238
        }
      ],
@ -1339,11 +1331,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 368,
+          "x": 625,
          "y": 364
        },
        {
-          "x": 368,
+          "x": 624.5,
+          "y": 414
+        },
+        {
+          "x": 519,
+          "y": 414
+        },
+        {
+          "x": 520,
          "y": 464
        }
      ],
@ -1378,11 +1378,27 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 510,
+          "x": 605,
          "y": 138
        },
        {
-          "x": 510,
+          "x": 604.3333333333333,
+          "y": 188
+        },
+        {
+          "x": 434,
+          "y": 188
+        },
+        {
+          "x": 434,
+          "y": 761
+        },
+        {
+          "x": 376.5,
+          "y": 761
+        },
+        {
+          "x": 377,
          "y": 891
        }
      ],
@ -1417,28 +1433,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 327,
+          "x": 666,
          "y": 364
        },
        {
-          "x": 326.66666666666663,
-          "y": 414
+          "x": 665.5,
+          "y": 2417
        },
        {
-          "x": 16.5,
-          "y": 414
+          "x": 320.5,
+          "y": 2417
        },
        {
-          "x": 16.5,
-          "y": 2407
-        },
-        {
-          "x": 363,
-          "y": 2407
-        },
-        {
-          "x": 363,
-          "y": 2559
+          "x": 320,
+          "y": 2569
        }
      ],
      "animated": false,
@ -1472,11 +1480,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 368,
+          "x": 519,
          "y": 590
        },
        {
-          "x": 368,
+          "x": 519,
          "y": 891
        }
      ],
@ -1511,11 +1519,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 510,
+          "x": 377,
          "y": 1017
        },
        {
-          "x": 510.16666666666663,
+          "x": 376.5,
+          "y": 1147
+        },
+        {
+          "x": 301.5,
+          "y": 1147
+        },
+        {
+          "x": 301.5,
          "y": 1197
        }
      ],
@ -1550,11 +1566,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 510.16666666666663,
+          "x": 301.5,
          "y": 1323
        },
        {
-          "x": 510.16666666666663,
+          "x": 301.5,
          "y": 1503
        }
      ],
@ -1589,11 +1605,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 510.16666666666663,
+          "x": 301.5,
          "y": 1629
        },
        {
-          "x": 510.16666666666663,
+          "x": 301.5,
          "y": 1914
        }
      ],
@ -1628,12 +1644,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 530.5,
+          "x": 281.1666666666667,
          "y": 2040
        },
        {
-          "x": 531,
-          "y": 2537
+          "x": 281.1666666666667,
+          "y": 2397
+        },
+        {
+          "x": 153,
+          "y": 2397
+        },
+        {
+          "x": 153,
+          "y": 2547
        }
      ],
      "animated": false,
@ -1667,12 +1691,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 531,
-          "y": 2668
+          "x": 153,
+          "y": 2678
        },
        {
-          "x": 531,
-          "y": 3195
+          "x": 153,
+          "y": 3075
+        },
+        {
+          "x": 152.5,
+          "y": 3075
+        },
+        {
+          "x": 153,
+          "y": 3205
        }
      ],
      "animated": false,
@ -1706,12 +1738,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 531,
-          "y": 3326
+          "x": 153,
+          "y": 3336
        },
        {
-          "x": 530.5,
-          "y": 4300
+          "x": 152.5,
+          "y": 4180
+        },
+        {
+          "x": 229.66666666666663,
+          "y": 4180
+        },
+        {
+          "x": 229.66666666666663,
+          "y": 4310
        }
      ],
      "animated": false,
@ -1745,12 +1785,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 384,
-          "y": 2665
+          "x": 300,
+          "y": 2675
        },
        {
-          "x": 383.5,
-          "y": 2688
+          "x": 300,
+          "y": 2698
        }
      ],
      "animated": false,
@ -1784,20 +1824,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 383.5,
-          "y": 2814
+          "x": 300,
+          "y": 2824
        },
        {
-          "x": 383.5,
-          "y": 2944
-        },
-        {
-          "x": 383,
-          "y": 2944
-        },
-        {
-          "x": 383,
-          "y": 3197.5
+          "x": 300,
+          "y": 3207.5
        }
      ],
      "animated": false,
@ -1831,12 +1863,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 383,
-          "y": 3323.5
+          "x": 300,
+          "y": 3333.5
        },
        {
-          "x": 383,
-          "y": 3346
+          "x": 300,
+          "y": 3356
        }
      ],
      "animated": false,
@ -1870,19 +1902,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 368,
+          "x": 519,
          "y": 1017
        },
        {
-          "x": 367.66666666666663,
-          "y": 1147
-        },
-        {
-          "x": 163.99999999999997,
-          "y": 1147
-        },
-        {
-          "x": 163.99999999999997,
+          "x": 519,
          "y": 1503
        }
      ],
@ -1917,11 +1941,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 164,
+          "x": 519,
          "y": 1629
        },
        {
-          "x": 164,
+          "x": 519,
          "y": 1889
        }
      ],
@ -1956,19 +1980,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 489.8333333333333,
+          "x": 321.83333333333337,
          "y": 2040
        },
        {
-          "x": 489.8333333333333,
+          "x": 321.83333333333337,
          "y": 2145
        },
        {
-          "x": 207.66666666666669,
+          "x": 475.33333333333337,
          "y": 2145
        },
        {
-          "x": 208,
+          "x": 476,
          "y": 2195
        }
      ],
@ -2003,11 +2027,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 164,
+          "x": 519,
          "y": 2015
        },
        {
-          "x": 164,
+          "x": 519,
          "y": 2195
        }
      ],
@ -2042,12 +2066,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 164,
+          "x": 519,
          "y": 2347
        },
        {
-          "x": 164,
-          "y": 3320.6666666666665
+          "x": 519,
+          "y": 3330.6666666666665
        }
      ],
      "animated": false,
@ -2081,28 +2105,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 143.33333333333331,
-          "y": 3446.6666666666665
+          "x": 498.3333333333333,
+          "y": 3456.6666666666665
        },
        {
-          "x": 143.33333333333331,
-          "y": 3602
+          "x": 498.3333333333333,
+          "y": 3612
        },
        {
-          "x": 57.166666666666664,
-          "y": 3602
+          "x": 372.16666666666663,
+          "y": 3612
        },
        {
-          "x": 57.166666666666664,
-          "y": 4170
-        },
-        {
-          "x": 246,
-          "y": 4170
-        },
-        {
-          "x": 246,
-          "y": 4300
+          "x": 372.16666666666663,
+          "y": 4310
        }
      ],
      "animated": false,
@ -2136,20 +2152,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 383,
-          "y": 3472
+          "x": 300,
+          "y": 3482
        },
        {
-          "x": 383,
-          "y": 3602
+          "x": 300,
+          "y": 3622
        },
        {
-          "x": 224.66666666666666,
-          "y": 3602
+          "x": 499.66666666666663,
+          "y": 3622
        },
        {
-          "x": 225,
-          "y": 3732
+          "x": 500,
+          "y": 3752
        }
      ],
      "animated": false,
@ -2183,12 +2199,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 184.66666666666666,
-          "y": 3446.6666666666665
+          "x": 539.6666666666666,
+          "y": 3456.6666666666665
        },
        {
-          "x": 185,
-          "y": 3732
+          "x": 540,
+          "y": 3752
        }
      ],
      "animated": false,
@ -2222,12 +2238,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 204,
-          "y": 3884
+          "x": 520,
+          "y": 3904
        },
        {
-          "x": 204.5,
-          "y": 3904
+          "x": 519.6666666666666,
+          "y": 3924
        }
      ],
      "animated": false,
@ -2261,20 +2277,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 204.66666666666666,
-          "y": 4030
+          "x": 519.6666666666666,
+          "y": 4050
        },
        {
-          "x": 204.66666666666666,
-          "y": 4160
+          "x": 519.6666666666666,
+          "y": 4180
        },
        {
-          "x": 388,
-          "y": 4160
+          "x": 514.1666666666666,
+          "y": 4180
        },
        {
-          "x": 388,
-          "y": 4300
+          "x": 514.1666666666666,
+          "y": 4310
        }
      ],
      "animated": false,
@ -2308,12 +2324,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 388,
-          "y": 4426
+          "x": 514.1666666666666,
+          "y": 4436
        },
        {
-          "x": 388,
-          "y": 4606
+          "x": 514,
+          "y": 4616
        }
      ],
      "animated": false,
@ -2347,20 +2363,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 208,
+          "x": 476,
          "y": 2347
        },
        {
-          "x": 207.66666666666669,
-          "y": 2397
+          "x": 475.33333333333337,
+          "y": 2407
        },
        {
-          "x": 404,
-          "y": 2397
+          "x": 279.5,
+          "y": 2407
        },
        {
-          "x": 404,
-          "y": 2559
+          "x": 280,
+          "y": 2569
        }
      ],
      "animated": false,
--- a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/large_arch/elk/board.exp.json
+++ b/e2etests/testdata/stable/large_arch/elk/board.exp.json
@ -6,7 +6,7 @@
      "id": "a",
      "type": "",
      "pos": {
-        "x": 1657,
+        "x": 12,
        "y": 541
      },
      "width": 113,
@ -46,7 +46,7 @@
      "id": "b",
      "type": "",
      "pos": {
-        "x": 1524,
+        "x": 1393,
        "y": 541
      },
      "width": 113,
@ -86,8 +86,8 @@
      "id": "c",
      "type": "",
      "pos": {
-        "x": 578,
-        "y": 2178
+        "x": 722,
+        "y": 2168
      },
      "width": 113,
      "height": 126,
@ -126,8 +126,8 @@
      "id": "d",
      "type": "",
      "pos": {
-        "x": 711,
-        "y": 2178
+        "x": 855,
+        "y": 2168
      },
      "width": 114,
      "height": 126,
@ -166,8 +166,8 @@
      "id": "e",
      "type": "",
      "pos": {
-        "x": 712,
-        "y": 2404
+        "x": 855,
+        "y": 2394
      },
      "width": 113,
      "height": 126,
@ -206,8 +206,8 @@
      "id": "f",
      "type": "",
      "pos": {
-        "x": 447,
-        "y": 2178
+        "x": 989,
+        "y": 2168
      },
      "width": 111,
      "height": 126,
@ -246,8 +246,8 @@
      "id": "g",
      "type": "",
      "pos": {
-        "x": 919,
-        "y": 2178
+        "x": 294,
+        "y": 2168
      },
      "width": 114,
      "height": 126,
@ -286,8 +286,8 @@
      "id": "h",
      "type": "",
      "pos": {
-        "x": 1006,
-        "y": 1311
+        "x": 343,
+        "y": 1301
      },
      "width": 113,
      "height": 126,
@ -326,10 +326,10 @@
      "id": "i",
      "type": "",
      "pos": {
-        "x": 239,
-        "y": 1311
+        "x": 664,
+        "y": 1301
      },
-      "width": 746,
+      "width": 683,
      "height": 732,
      "opacity": 1,
      "strokeDash": 0,
@ -366,8 +366,8 @@
      "id": "i.j",
      "type": "",
      "pos": {
-        "x": 517,
-        "y": 1386
+        "x": 878,
+        "y": 1376
      },
      "width": 392,
      "height": 276,
@ -406,8 +406,8 @@
      "id": "i.j.k",
      "type": "",
      "pos": {
-        "x": 592,
-        "y": 1461
+        "x": 953,
+        "y": 1451
      },
      "width": 113,
      "height": 126,
@ -446,8 +446,8 @@
      "id": "i.j.l",
      "type": "",
      "pos": {
-        "x": 725,
-        "y": 1461
+        "x": 1086,
+        "y": 1451
      },
      "width": 109,
      "height": 126,
@ -486,8 +486,8 @@
      "id": "i.m",
      "type": "",
      "pos": {
-        "x": 447,
-        "y": 1784
+        "x": 739,
+        "y": 1773
      },
      "width": 117,
      "height": 126,
@ -526,8 +526,8 @@
      "id": "i.n",
      "type": "",
      "pos": {
-        "x": 314,
-        "y": 1842
+        "x": 876,
+        "y": 1832
      },
      "width": 113,
      "height": 126,
@ -566,8 +566,8 @@
      "id": "i.o",
      "type": "",
      "pos": {
-        "x": 648,
-        "y": 1692
+        "x": 1009,
+        "y": 1682
      },
      "width": 263,
      "height": 276,
@ -606,8 +606,8 @@
      "id": "i.o.p",
      "type": "",
      "pos": {
-        "x": 723,
-        "y": 1767
+        "x": 1084,
+        "y": 1757
      },
      "width": 113,
      "height": 126,
@ -646,8 +646,8 @@
      "id": "q",
      "type": "",
      "pos": {
-        "x": 313,
-        "y": 2178
+        "x": 1272,
+        "y": 2168
      },
      "width": 114,
      "height": 126,
@ -686,10 +686,10 @@
      "id": "r",
      "type": "",
      "pos": {
-        "x": 12,
+        "x": 145,
        "y": 12
      },
-      "width": 1492,
+      "width": 1228,
      "height": 1179,
      "opacity": 1,
      "strokeDash": 0,
@ -726,10 +726,10 @@
      "id": "r.s",
      "type": "",
      "pos": {
-        "x": 87,
+        "x": 220,
        "y": 388
      },
-      "width": 767,
+      "width": 795,
      "height": 577,
      "opacity": 1,
      "strokeDash": 0,
@ -766,7 +766,7 @@
      "id": "r.s.t",
      "type": "",
      "pos": {
-        "x": 669,
+        "x": 295,
        "y": 671
      },
      "width": 111,
@ -806,7 +806,7 @@
      "id": "r.s.u",
      "type": "",
      "pos": {
-        "x": 162,
+        "x": 426,
        "y": 609
      },
      "width": 264,
@ -846,7 +846,7 @@
      "id": "r.s.u.v",
      "type": "",
      "pos": {
-        "x": 237,
+        "x": 501,
        "y": 684
      },
      "width": 114,
@ -886,8 +886,8 @@
      "id": "r.s.w",
      "type": "",
      "pos": {
-        "x": 446,
-        "y": 687
+        "x": 710,
+        "y": 686
      },
      "width": 118,
      "height": 126,
@ -926,7 +926,7 @@
      "id": "r.s.x",
      "type": "",
      "pos": {
-        "x": 467,
+        "x": 693,
        "y": 463
      },
      "width": 113,
@ -966,7 +966,7 @@
      "id": "r.s.y",
      "type": "",
      "pos": {
-        "x": 600,
+        "x": 826,
        "y": 463
      },
      "width": 114,
@ -1006,7 +1006,7 @@
      "id": "r.z",
      "type": "",
      "pos": {
-        "x": 238,
+        "x": 502,
        "y": 990
      },
      "width": 112,
@ -1046,7 +1046,7 @@
      "id": "r.aa",
      "type": "",
      "pos": {
-        "x": 549,
+        "x": 261,
        "y": 237
      },
      "width": 122,
@ -1086,7 +1086,7 @@
      "id": "r.bb",
      "type": "",
      "pos": {
-        "x": 1014,
+        "x": 403,
        "y": 87
      },
      "width": 415,
@ -1126,7 +1126,7 @@
      "id": "r.bb.cc",
      "type": "",
      "pos": {
-        "x": 1089,
+        "x": 478,
        "y": 162
      },
      "width": 121,
@ -1166,7 +1166,7 @@
      "id": "r.bb.dd",
      "type": "",
      "pos": {
-        "x": 1230,
+        "x": 619,
        "y": 162
      },
      "width": 124,
@ -1206,7 +1206,7 @@
      "id": "r.ee",
      "type": "",
      "pos": {
-        "x": 872,
+        "x": 1033,
        "y": 237
      },
      "width": 122,
@ -1246,7 +1246,7 @@
      "id": "r.ff",
      "type": "",
      "pos": {
-        "x": 875,
+        "x": 1035,
        "y": 388
      },
      "width": 117,
@ -1286,7 +1286,7 @@
      "id": "r.gg",
      "type": "",
      "pos": {
-        "x": 691,
+        "x": 1175,
        "y": 237
      },
      "width": 123,
@ -1350,20 +1350,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 648,
-          "y": 1587
+          "x": 1010.25,
+          "y": 1577
        },
        {
-          "x": 648,
-          "y": 1677
+          "x": 1010.25,
+          "y": 1667
        },
        {
-          "x": 534.75,
-          "y": 1677
+          "x": 827.5,
+          "y": 1667
        },
        {
-          "x": 534.75,
-          "y": 1783.875
+          "x": 827.5,
+          "y": 1773.875
        }
      ],
      "animated": false,
@ -1397,12 +1397,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 779,
-          "y": 1587
+          "x": 1141.25,
+          "y": 1577
        },
        {
-          "x": 779,
-          "y": 1767
+          "x": 1141.25,
+          "y": 1757
        }
      ],
      "animated": false,
@ -1436,28 +1436,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 341.5,
-          "y": 2178
+          "x": 1357.75,
+          "y": 2168
        },
        {
-          "x": 341.5,
-          "y": 2098
+          "x": 1357.75,
+          "y": 1246
        },
        {
-          "x": 228.5,
-          "y": 2098
+          "x": 798.25,
+          "y": 1246
        },
        {
-          "x": 228.5,
-          "y": 1256
-        },
-        {
-          "x": 475.75,
-          "y": 1256
-        },
-        {
-          "x": 475.75,
-          "y": 1783.875
+          "x": 798.25,
+          "y": 1773.875
        }
      ],
      "animated": false,
@ -1491,20 +1483,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 466,
-          "y": 1909.875
+          "x": 837.25,
+          "y": 1899.875
        },
        {
-          "x": 466,
+          "x": 837.25,
          "y": 2098
        },
        {
-          "x": 398.5,
+          "x": 1300.75,
          "y": 2098
        },
        {
-          "x": 398.5,
-          "y": 2178
+          "x": 1300.75,
+          "y": 2168
        }
      ],
      "animated": false,
@ -1538,12 +1530,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 370,
-          "y": 1968
+          "x": 933.25,
+          "y": 1958
        },
        {
-          "x": 370,
-          "y": 2178
+          "x": 933.25,
+          "y": 2088
+        },
+        {
+          "x": 1329.25,
+          "y": 2088
+        },
+        {
+          "x": 1329.25,
+          "y": 2168
        }
      ],
      "animated": false,
@ -1577,20 +1577,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 505,
-          "y": 1909.875
+          "x": 778.75,
+          "y": 1899.875
        },
        {
-          "x": 505,
-          "y": 2118
-        },
-        {
-          "x": 634.5,
-          "y": 2118
-        },
-        {
-          "x": 634.5,
-          "y": 2178
+          "x": 778.75,
+          "y": 2168
        }
      ],
      "animated": false,
@ -1624,20 +1616,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 524.5,
-          "y": 1909.875
+          "x": 798.25,
+          "y": 1899.875
        },
        {
-          "x": 524.5,
-          "y": 2108
+          "x": 798.25,
+          "y": 2118
        },
        {
-          "x": 768,
-          "y": 2108
+          "x": 912.25,
+          "y": 2118
        },
        {
-          "x": 768,
-          "y": 2178
+          "x": 912.25,
+          "y": 2168
        }
      ],
      "animated": false,
@ -1671,20 +1663,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 544,
-          "y": 1909.875
+          "x": 759.25,
+          "y": 1899.875
        },
        {
-          "x": 544,
-          "y": 2098
+          "x": 759.25,
+          "y": 2088
        },
        {
-          "x": 957,
-          "y": 2098
+          "x": 370,
+          "y": 2088
        },
        {
-          "x": 957,
-          "y": 2178
+          "x": 370,
+          "y": 2168
        }
      ],
      "animated": false,
@ -1718,20 +1710,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 485.5,
-          "y": 1909.875
+          "x": 817.75,
+          "y": 1899.875
        },
        {
-          "x": 485.5,
-          "y": 2128
+          "x": 817.75,
+          "y": 2108
        },
        {
-          "x": 502.5,
-          "y": 2128
+          "x": 1044.75,
+          "y": 2108
        },
        {
-          "x": 502.5,
-          "y": 2178
+          "x": 1044.75,
+          "y": 2168
        }
      ],
      "animated": false,
@ -1765,12 +1757,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 768,
-          "y": 2304
+          "x": 912.25,
+          "y": 2294
        },
        {
-          "x": 768,
-          "y": 2404
+          "x": 912.25,
+          "y": 2394
        }
      ],
      "animated": false,
@ -1804,19 +1796,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 542.6666666666666,
+          "x": 731.3333333333333,
          "y": 589
        },
        {
-          "x": 542.6666666666666,
+          "x": 731.3333333333333,
          "y": 599
        },
        {
-          "x": 696.5833333333333,
+          "x": 378.25,
          "y": 599
        },
        {
-          "x": 696.5833333333333,
+          "x": 378.25,
          "y": 671
        }
      ],
@ -1851,11 +1843,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 505,
+          "x": 769,
          "y": 589
        },
        {
-          "x": 505,
+          "x": 769,
          "y": 686.5
        }
      ],
@ -1890,11 +1882,19 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 752.0833333333333,
+          "x": 1236.6666666666665,
          "y": 363
        },
        {
-          "x": 752.0833333333333,
+          "x": 1236.6666666666665,
+          "y": 373
+        },
+        {
+          "x": 350.5,
+          "y": 373
+        },
+        {
+          "x": 350.5,
          "y": 671
        }
      ],
@ -1929,11 +1929,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 294,
+          "x": 558,
          "y": 810
        },
        {
-          "x": 294,
+          "x": 558,
          "y": 990
        }
      ],
@ -1968,19 +1968,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 609.5833333333333,
+          "x": 322.75,
          "y": 363
        },
        {
-          "x": 609.5833333333333,
-          "y": 373
-        },
-        {
-          "x": 724.3333333333333,
-          "y": 373
-        },
-        {
-          "x": 724.3333333333333,
+          "x": 322.75,
          "y": 671
        }
      ],
@ -2015,12 +2007,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 505,
+          "x": 769,
          "y": 812.5
        },
        {
-          "x": 505,
-          "y": 1783.875
+          "x": 769,
+          "y": 1773.875
        }
      ],
      "animated": false,
@ -2054,20 +2046,12 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 705.8333333333333,
+          "x": 332,
          "y": 797
        },
        {
-          "x": 705.8333333333333,
-          "y": 1256
-        },
-        {
-          "x": 995,
-          "y": 1256
-        },
-        {
-          "x": 995,
-          "y": 2178
+          "x": 332,
+          "y": 2168
        }
      ],
      "animated": false,
@ -2101,20 +2085,20 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 742.8333333333333,
+          "x": 369,
          "y": 797
        },
        {
-          "x": 742.8333333333333,
+          "x": 369,
          "y": 1246
        },
        {
-          "x": 1062.5,
+          "x": 399.5,
          "y": 1246
        },
        {
-          "x": 1062.5,
-          "y": 1311
+          "x": 399.5,
+          "y": 1301
        }
      ],
      "animated": false,
@ -2148,11 +2132,11 @@
      "labelPercentage": 0,
      "route": [
        {
-          "x": 933.3333333333333,
+          "x": 1094.1666666666665,
          "y": 363
        },
        {
-          "x": 933.3333333333333,
+          "x": 1094.1666666666665,
          "y": 388
        }
      ],
--- a/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
--- a/Show more
+++ b/Show more