Merge pull request #525 from alixander/near-constants

Constant value nears (diagram titles)

ci/release/changelogs/next.md

@@ -9,14 +9,16 @@ 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 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)
+- 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)
+- 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 ⛑️
 

d2compiler/compile.go

@@ -850,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
 			}
 		}

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
 `,
 		},
 		{

d2graph/d2graph.go

@@ -1189,6 +1189,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
@@ -1196,4 +1212,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{}{}
+	}
 }

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)
+}

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() {

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
 		}
 	}

d2renderers/d2sketch/testdata/twitter/sketch.exp.svg

@@ -282,6 +282,7 @@ width="3454" height="2449" viewBox="-100 -100 3454 2449"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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 {

e2etests/stable_test.go

@@ -1585,6 +1585,36 @@ 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
 `,
 		},
 	}

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

@@ -277,6 +277,7 @@ width="1536" height="574" viewBox="-100 -100 1536 574"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="1346" height="629" viewBox="-88 -88 1346 629"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="1317" height="1854" viewBox="-100 -100 1317 1854"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="1092" height="1907" viewBox="-88 -88 1092 1907"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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": -44
+      },
+      "width": 162,
+      "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": "The top of the mountain",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 162,
+      "labelHeight": 24,
+      "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": true,
+      "underline": false,
+      "labelWidth": 943,
+      "labelHeight": 130,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am top left",
+      "type": "text",
+      "pos": {
+        "x": -515,
+        "y": -44
+      },
+      "width": 81,
+      "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": "i am top left",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 81,
+      "labelHeight": 24,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am top right",
+      "type": "text",
+      "pos": {
+        "x": 548,
+        "y": -44
+      },
+      "width": 91,
+      "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": "i am top right",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 91,
+      "labelHeight": 24,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am bottom left",
+      "type": "text",
+      "pos": {
+        "x": -542,
+        "y": 372
+      },
+      "width": 108,
+      "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": "i am bottom left",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 108,
+      "labelHeight": 24,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am bottom right",
+      "type": "text",
+      "pos": {
+        "x": 548,
+        "y": 372
+      },
+      "width": 118,
+      "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": "i am bottom right",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 118,
+      "labelHeight": 24,
+      "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
+    }
+  ]
+}

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": -32
+      },
+      "width": 162,
+      "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": "The top of the mountain",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 162,
+      "labelHeight": 24,
+      "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": true,
+      "underline": false,
+      "labelWidth": 943,
+      "labelHeight": 130,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am top left",
+      "type": "text",
+      "pos": {
+        "x": -503,
+        "y": -32
+      },
+      "width": 81,
+      "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": "i am top left",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 81,
+      "labelHeight": 24,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am top right",
+      "type": "text",
+      "pos": {
+        "x": 560,
+        "y": -32
+      },
+      "width": 91,
+      "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": "i am top right",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 91,
+      "labelHeight": 24,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am bottom left",
+      "type": "text",
+      "pos": {
+        "x": -530,
+        "y": 384
+      },
+      "width": 108,
+      "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": "i am bottom left",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 108,
+      "labelHeight": 24,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i am bottom right",
+      "type": "text",
+      "pos": {
+        "x": 560,
+        "y": 384
+      },
+      "width": 118,
+      "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": "i am bottom right",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 118,
+      "labelHeight": 24,
+      "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
+    }
+  ]
+}

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": true,
+      "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
+    }
+  ]
+}

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": true,
+      "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
+    }
+  ]
+}

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 {

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 {

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 {

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 {

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

@@ -277,6 +277,7 @@ width="913" height="929" viewBox="-100 -100 913 929"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="833" height="1050" viewBox="-88 -88 833 1050"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="579" height="752" viewBox="-100 -100 579 752"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="579" height="752" viewBox="-88 -88 579 752"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="445" height="728" viewBox="-100 -100 445 728"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="445" height="728" viewBox="-88 -88 445 728"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="547" height="1164" viewBox="-100 -100 547 1164"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="547" height="1164" viewBox="-88 -88 547 1164"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="1120" height="1028" viewBox="-100 -100 1120 1028"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="1120" height="1028" viewBox="-88 -88 1120 1028"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="466" height="702" viewBox="-100 -100 466 702"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="466" height="702" viewBox="-88 -88 466 702"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="731" height="838" viewBox="-100 -100 731 838"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="731" height="838" viewBox="-88 -88 731 838"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="512" height="681" viewBox="-100 -100 512 681"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="562" height="731" viewBox="-88 -88 562 731"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="759" height="348" viewBox="-100 -100 759 348"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="809" height="398" viewBox="-88 -88 809 398"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="759" height="348" viewBox="-100 -100 759 348"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="809" height="398" viewBox="-88 -88 809 398"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="396" height="763" viewBox="-100 -100 396 763"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="396" height="763" viewBox="-88 -88 396 763"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="412" height="803" viewBox="-100 -100 412 803"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="412" height="803" viewBox="-88 -88 412 803"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="313" height="676" viewBox="-100 -100 313 676"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="313" height="676" viewBox="-88 -88 313 676"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="2057" height="676" viewBox="-100 -100 2057 676"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="2057" height="676" viewBox="-88 -88 2057 676"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="802" height="822" viewBox="-100 -100 802 822"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

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

@@ -277,6 +277,7 @@ width="802" height="822" viewBox="-88 -88 802 822"><style type="text/css">
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  font-family: "font-regular";
 }
 
 .md h2 {

testdata/d2compiler/TestCompile/errors/reserved_icon_style.exp.json

@@ -17,7 +17,7 @@
       },
       {
         "range": "d2/testdata/d2compiler/TestCompile/errors/reserved_icon_style.d2,0:0:0-0:1:1",
-        "errmsg": "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."
+        "errmsg": "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"
       }
     ]
   }

testdata/d2compiler/TestCompile/near_bad_constant.exp.json

@@ -0,0 +1,12 @@
+{
+  "graph": null,
+  "err": {
+    "ioerr": null,
+    "errs": [
+      {
+        "range": "d2/testdata/d2compiler/TestCompile/near_bad_constant.d2,0:0:0-0:11:11",
+        "errmsg": "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"
+      }
+    ]
+  }
+}

testdata/d2compiler/TestCompile/near_constant.exp.json

@@ -0,0 +1,149 @@
+{
+  "graph": {
+    "ast": {
+      "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:0:0-1:0:19",
+      "nodes": [
+        {
+          "map_key": {
+            "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:0:0-0:18:18",
+            "key": {
+              "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:0:0-0:6:6",
+              "path": [
+                {
+                  "unquoted_string": {
+                    "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:0:0-0:1:1",
+                    "value": [
+                      {
+                        "string": "x",
+                        "raw_string": "x"
+                      }
+                    ]
+                  }
+                },
+                {
+                  "unquoted_string": {
+                    "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:2:2-0:6:6",
+                    "value": [
+                      {
+                        "string": "near",
+                        "raw_string": "near"
+                      }
+                    ]
+                  }
+                }
+              ]
+            },
+            "primary": {},
+            "value": {
+              "unquoted_string": {
+                "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:8:8-0:18:18",
+                "value": [
+                  {
+                    "string": "top-center",
+                    "raw_string": "top-center"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ]
+    },
+    "root": {
+      "id": "",
+      "id_val": "",
+      "label_dimensions": {
+        "width": 0,
+        "height": 0
+      },
+      "attributes": {
+        "label": {
+          "value": ""
+        },
+        "style": {},
+        "near_key": null,
+        "shape": {
+          "value": ""
+        },
+        "direction": {
+          "value": ""
+        }
+      },
+      "zIndex": 0
+    },
+    "edges": null,
+    "objects": [
+      {
+        "id": "x",
+        "id_val": "x",
+        "label_dimensions": {
+          "width": 0,
+          "height": 0
+        },
+        "references": [
+          {
+            "key": {
+              "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:0:0-0:6:6",
+              "path": [
+                {
+                  "unquoted_string": {
+                    "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:0:0-0:1:1",
+                    "value": [
+                      {
+                        "string": "x",
+                        "raw_string": "x"
+                      }
+                    ]
+                  }
+                },
+                {
+                  "unquoted_string": {
+                    "range": "d2/testdata/d2compiler/TestCompile/near_constant.d2,0:2:2-0:6:6",
+                    "value": [
+                      {
+                        "string": "near",
+                        "raw_string": "near"
+                      }
+                    ]
+                  }
+                }
+              ]
+            },
+            "key_path_index": 0,
+            "map_key_edge_index": 0
+          }
+        ],
+        "attributes": {
+          "label": {
+            "value": "x"
+          },
+          "style": {},
+          "near_key": {
+            "range": ",0:0:0-0:10:10",
+            "path": [
+              {
+                "unquoted_string": {
+                  "range": ",0:0:0-0:10:10",
+                  "value": [
+                    {
+                      "string": "top-center",
+                      "raw_string": "top-center"
+                    }
+                  ]
+                }
+              }
+            ]
+          },
+          "shape": {
+            "value": ""
+          },
+          "direction": {
+            "value": ""
+          }
+        },
+        "zIndex": 0
+      }
+    ]
+  },
+  "err": null
+}

testdata/d2compiler/TestCompile/nested_near_constant.exp.json

@@ -0,0 +1,12 @@
+{
+  "graph": null,
+  "err": {
+    "ioerr": null,
+    "errs": [
+      {
+        "range": "d2/testdata/d2compiler/TestCompile/nested_near_constant.d2,0:0:0-0:10:10",
+        "errmsg": "d2/testdata/d2compiler/TestCompile/nested_near_constant.d2:1:1: constant near keys can only be set on root level shapes"
+      }
+    ]
+  }
+}