From 939a5ca088553f5b7fe410566bd4d9e54beb3a60 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Fri, 10 Feb 2023 12:18:50 -0800 Subject: [PATCH 01/14] ok --- d2layouts/d2dagrelayout/layout.go | 97 ++++++- .../d2sketch/testdata/animated/sketch.exp.svg | 6 +- .../testdata/child_to_child/sketch.exp.svg | 6 +- e2etests/stable_test.go | 7 + .../dagre/board.exp.json | 44 +-- .../dagre/sketch.exp.svg | 8 +- .../dagre/board.exp.json | 48 ++-- .../dagre/sketch.exp.svg | 14 +- .../elk_alignment/dagre/board.exp.json | 104 +++---- .../elk_alignment/dagre/sketch.exp.svg | 22 +- .../elk_loop_panic/dagre/board.exp.json | 36 +-- .../elk_loop_panic/dagre/sketch.exp.svg | 6 +- .../dagre/board.exp.json | 28 +- .../dagre/sketch.exp.svg | 6 +- .../child_to_child/dagre/board.exp.json | 20 +- .../child_to_child/dagre/sketch.exp.svg | 6 +- .../stable/chaos1/dagre/board.exp.json | 20 +- .../stable/chaos1/dagre/sketch.exp.svg | 10 +- .../stable/chaos2/dagre/board.exp.json | 190 ++++++------- .../stable/chaos2/dagre/sketch.exp.svg | 22 +- .../child_parent_edges/dagre/board.exp.json | 76 ++--- .../child_parent_edges/dagre/sketch.exp.svg | 6 +- .../complex-layers/dagre/board.exp.json | 10 +- .../connected_container/dagre/board.exp.json | 38 +-- .../connected_container/dagre/sketch.exp.svg | 6 +- .../container_edges/dagre/board.exp.json | 36 +-- .../container_edges/dagre/sketch.exp.svg | 2 +- .../container_label_loop/dagre/board.exp.json | 263 ++++++++++++++++++ .../container_label_loop/dagre/sketch.exp.svg | 59 ++++ .../container_label_loop/elk/board.exp.json | 217 +++++++++++++++ .../container_label_loop/elk/sketch.exp.svg | 59 ++++ .../different_subgraphs/dagre/board.exp.json | 48 ++-- .../different_subgraphs/dagre/sketch.exp.svg | 6 +- .../stable/direction/dagre/board.exp.json | 90 +++--- .../stable/direction/dagre/sketch.exp.svg | 2 +- .../stable/investigate/dagre/board.exp.json | 144 +++++----- .../stable/investigate/dagre/sketch.exp.svg | 14 +- .../stable/large_arch/dagre/board.exp.json | 258 ++++++++--------- .../stable/large_arch/dagre/sketch.exp.svg | 6 +- .../markdown_stroke_fill/dagre/board.exp.json | 8 +- .../markdown_stroke_fill/dagre/sketch.exp.svg | 10 +- .../md_2space_newline/dagre/board.exp.json | 8 +- .../md_2space_newline/dagre/sketch.exp.svg | 8 +- .../md_backslash_newline/dagre/board.exp.json | 8 +- .../md_backslash_newline/dagre/sketch.exp.svg | 8 +- .../one_container_loop/dagre/board.exp.json | 14 +- .../one_container_loop/dagre/sketch.exp.svg | 6 +- .../dagre/board.exp.json | 28 +- .../dagre/sketch.exp.svg | 6 +- .../dagre/board.exp.json | 94 +++---- .../dagre/sketch.exp.svg | 14 +- .../sequence_diagrams/dagre/board.exp.json | 234 ++++++++-------- .../sequence_diagrams/dagre/sketch.exp.svg | 26 +- .../dagre/board.exp.json | 126 ++++----- .../dagre/sketch.exp.svg | 2 +- .../container_child_edge/dagre/board.exp.json | 26 +- .../container_child_edge/dagre/sketch.exp.svg | 10 +- .../dagre/board.exp.json | 26 +- .../dagre/sketch.exp.svg | 6 +- .../dagre/board.exp.json | 38 +-- .../dagre/sketch.exp.svg | 8 +- 61 files changed, 1726 insertions(+), 1028 deletions(-) create mode 100644 e2etests/testdata/stable/container_label_loop/dagre/board.exp.json create mode 100644 e2etests/testdata/stable/container_label_loop/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/stable/container_label_loop/elk/board.exp.json create mode 100644 e2etests/testdata/stable/container_label_loop/elk/sketch.exp.svg diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go index 7ac2a44e4..7004496cd 100644 --- a/d2layouts/d2dagrelayout/layout.go +++ b/d2layouts/d2dagrelayout/layout.go @@ -7,6 +7,7 @@ import ( "fmt" "math" "regexp" + "sort" "strings" "cdr.dev/slog" @@ -104,6 +105,16 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err rootAttrs.rankdir = "TB" } + maxContainerLabelHeight := 0 + for _, obj := range g.Objects { + if len(obj.ChildrenArray) == 0 { + continue + } + if obj.LabelHeight != nil { + maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, *obj.LabelHeight) + } + } + maxLabelSize := 0 for _, edge := range g.Edges { size := edge.LabelDimensions.Width @@ -112,7 +123,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err } maxLabelSize = go2.Max(maxLabelSize, size) } - rootAttrs.ranksep = go2.Max(100, maxLabelSize+40) + rootAttrs.ranksep = go2.Max(go2.Max(100, maxLabelSize+40), maxContainerLabelHeight) configJS := setGraphAttrs(rootAttrs) if _, err := vm.RunString(configJS); err != nil { @@ -130,6 +141,9 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil { height += float64(*obj.LabelHeight) + label.PADDING } + if len(obj.ChildrenArray) > 0 { + obj.Height += float64(*obj.LabelHeight) + } } loadScript += generateAddNodeLine(id, int(obj.Width), int(height)) if obj.Parent != g.Root { @@ -191,7 +205,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err if obj.LabelWidth != nil && obj.LabelHeight != nil { if len(obj.ChildrenArray) > 0 { - obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter)) + obj.LabelPosition = go2.Pointer(string(label.OutsideTopCenter)) } else if obj.Attributes.Shape.Value == d2target.ShapeImage { obj.LabelPosition = go2.Pointer(string(label.OutsideBottomCenter)) // remove the extra height we added to the node when passing to dagre @@ -327,6 +341,85 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err } } + // TODO probably don't need + byLevels := make([]*d2graph.Object, len(g.Objects)) + copy(byLevels, g.Objects) + sort.SliceStable(byLevels, func(i, j int) bool { + return byLevels[i].Level() > byLevels[j].Level() + }) + + for _, obj := range byLevels { + if obj.LabelHeight == nil || len(obj.ChildrenArray) <= 0 { + continue + } + + // This was artifically added to make dagre consider label height + obj.Height -= float64(*obj.LabelHeight) + + movedEdges := make(map[*d2graph.Edge]struct{}) + for _, e := range g.Edges { + currSrc := e.Src + currDst := e.Dst + + isSrcDesc := false + isDstDesc := false + + for currSrc != nil { + if currSrc == obj { + isSrcDesc = true + break + } + currSrc = currSrc.Parent + } + for currDst != nil { + if currDst == obj { + isDstDesc = true + break + } + currDst = currDst.Parent + } + if isSrcDesc && isDstDesc { + stepSize := float64(*obj.LabelHeight) + if e.Src != obj || e.Dst != obj { + stepSize /= 2. + } + movedEdges[e] = struct{}{} + for _, p := range e.Route { + p.Y += stepSize + } + } + } + + // Downshift descendents + q := []*d2graph.Object{obj} + for len(q) > 0 { + curr := q[0] + q = q[1:] + + stepSize := float64(*obj.LabelHeight) + if curr != obj { + stepSize /= 2. + } + curr.TopLeft.Y += stepSize + if curr != obj { + for _, e := range g.Edges { + if _, ok := movedEdges[e]; ok { + continue + } + if e.Src == curr { + e.Route[0].Y += stepSize + } + if e.Dst == curr { + e.Route[len(e.Route)-1].Y += stepSize + } + } + } + for _, c := range curr.ChildrenArray { + q = append(q, c) + } + } + } + return nil } diff --git a/d2renderers/d2sketch/testdata/animated/sketch.exp.svg b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg index 51a2b7396..4ea57e1cb 100644 --- a/d2renderers/d2sketch/testdata/animated/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg @@ -3,7 +3,7 @@ id="d2-svg" style="background: white;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" -width="486" height="802" viewBox="-102 -102 486 802">aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 - - - - - - - - - +aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 + + + + + + + + + If we were meant to fly, we wouldn't keep losing our luggagebc + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/container_label_loop/elk/board.exp.json b/e2etests/testdata/stable/container_label_loop/elk/board.exp.json new file mode 100644 index 000000000..9e87e945d --- /dev/null +++ b/e2etests/testdata/stable/container_label_loop/elk/board.exp.json @@ -0,0 +1,217 @@ +{ + "name": "", + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "a", + "type": "rectangle", + "pos": { + "x": 62, + "y": 12 + }, + "width": 203, + "height": 382, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#E3E9FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "If we were meant to fly, we wouldn't keep losing our luggage", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 702, + "labelHeight": 36, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "a.b", + "type": "rectangle", + "pos": { + "x": 137, + "y": 87 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "b", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "a.c", + "type": "rectangle", + "pos": { + "x": 137, + "y": 253 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "c", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + } + ], + "connections": [ + { + "id": "a.(b -> c)[0]", + "src": "a.b", + "srcArrow": "none", + "srcLabel": "", + "dst": "a.c", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 163.5, + "y": 153 + }, + { + "x": 163.5, + "y": 253 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(a -> a)[0]", + "src": "a", + "srcArrow": "none", + "srcLabel": "", + "dst": "a", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 62, + "y": 139.33333333333331 + }, + { + "x": 12, + "y": 139.33333333333331 + }, + { + "x": 12, + "y": 266.66666666666663 + }, + { + "x": 62, + "y": 266.66666666666663 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/stable/container_label_loop/elk/sketch.exp.svg b/e2etests/testdata/stable/container_label_loop/elk/sketch.exp.svg new file mode 100644 index 000000000..95bc08d82 --- /dev/null +++ b/e2etests/testdata/stable/container_label_loop/elk/sketch.exp.svg @@ -0,0 +1,59 @@ + +If we were meant to fly, we wouldn't keep losing our luggagebc + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/different_subgraphs/dagre/board.exp.json b/e2etests/testdata/stable/different_subgraphs/dagre/board.exp.json index a0924a33c..3e1e67cc4 100644 --- a/e2etests/testdata/stable/different_subgraphs/dagre/board.exp.json +++ b/e2etests/testdata/stable/different_subgraphs/dagre/board.exp.json @@ -499,10 +499,10 @@ "type": "rectangle", "pos": { "x": 821, - "y": 0 + "y": 36 }, "width": 368, - "height": 664, + "height": 628, "opacity": 1, "strokeDash": 0, "strokeWidth": 2, @@ -531,7 +531,7 @@ "underline": false, "labelWidth": 72, "labelHeight": 36, - "labelPosition": "INSIDE_TOP_CENTER", + "labelPosition": "OUTSIDE_TOP_CENTER", "zIndex": 0, "level": 1 }, @@ -704,7 +704,7 @@ "type": "rectangle", "pos": { "x": 1056, - "y": 216 + "y": 234 }, "width": 53, "height": 66, @@ -745,7 +745,7 @@ "type": "rectangle", "pos": { "x": 891, - "y": 382 + "y": 400 }, "width": 74, "height": 66, @@ -786,7 +786,7 @@ "type": "rectangle", "pos": { "x": 1038, - "y": 50 + "y": 68 }, "width": 88, "height": 66, @@ -827,7 +827,7 @@ "type": "rectangle", "pos": { "x": 871, - "y": 548 + "y": 566 }, "width": 113, "height": 66, @@ -868,7 +868,7 @@ "type": "rectangle", "pos": { "x": 1025, - "y": 382 + "y": 400 }, "width": 75, "height": 66, @@ -1587,19 +1587,19 @@ "route": [ { "x": 1055.5, - "y": 263.23624595469255 + "y": 281.23624595469255 }, { "x": 953.1, - "y": 318.24724919093853 + "y": 336.24724919093853 }, { "x": 927.5, - "y": 342 + "y": 360 }, { "x": 927.5, - "y": 382 + "y": 400 } ], "isCurve": true, @@ -1635,19 +1635,19 @@ "route": [ { "x": 1082, - "y": 116 + "y": 134 }, { "x": 1082, - "y": 156 + "y": 174 }, { "x": 1082, - "y": 176 + "y": 194 }, { "x": 1082, - "y": 216 + "y": 234 } ], "isCurve": true, @@ -1683,19 +1683,19 @@ "route": [ { "x": 927.5, - "y": 448 + "y": 466 }, { "x": 927.5, - "y": 488 + "y": 506 }, { "x": 927.5, - "y": 508 + "y": 526 }, { "x": 927.5, - "y": 548 + "y": 566 } ], "isCurve": true, @@ -1731,19 +1731,19 @@ "route": [ { "x": 1074.0481927710844, - "y": 282 + "y": 300 }, { "x": 1064.4096385542168, - "y": 322 + "y": 340 }, { "x": 1062, - "y": 342 + "y": 360 }, { "x": 1062, - "y": 382 + "y": 400 } ], "isCurve": true, diff --git a/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg b/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg index cfccd3094..f0c7957ea 100644 --- a/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg @@ -3,7 +3,7 @@ id="d2-svg" style="background: white;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" -width="1696" height="868" viewBox="-102 -102 1696 868">container

they did it in style

-

a header

+container

they did it in style

+

a header

a line of text and an

{
 	indented: "block",
@@ -805,8 +805,8 @@ width="516" height="686" viewBox="-102 -102 516 686">markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

+markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

-
+

+
 
 markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

+markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

-
+

+
 
 containerscloudtall cylinderclass-
+containerscloudtall cylinderclass-
 num
 int-
 timeout
@@ -823,8 +823,8 @@ width="2482" height="2672" viewBox="-102 -102 2482 2672">aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
+aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
 
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
 eightsixteenthirty twosixty fourninety nine  twelvetwenty fourforty eighteighty one
-
-
-
-
-
-
\ No newline at end of file
diff --git a/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json b/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json
deleted file mode 100644
index 463f68094..000000000
--- a/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json
+++ /dev/null
@@ -1,369 +0,0 @@
-{
-  "name": "",
-  "fontFamily": "SourceSansPro",
-  "shapes": [
-    {
-      "id": "eight",
-      "type": "rectangle",
-      "pos": {
-        "x": 244,
-        "y": 12
-      },
-      "width": 64,
-      "height": 56,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "eight",
-      "fontSize": 8,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 19,
-      "labelHeight": 11,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    },
-    {
-      "id": "sixteen",
-      "type": "rectangle",
-      "pos": {
-        "x": 228,
-        "y": 284
-      },
-      "width": 97,
-      "height": 66,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "sixteen",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 52,
-      "labelHeight": 21,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    },
-    {
-      "id": "thirty two",
-      "type": "rectangle",
-      "pos": {
-        "x": 183,
-        "y": 581
-      },
-      "width": 187,
-      "height": 86,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "thirty two",
-      "fontSize": 32,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 142,
-      "labelHeight": 41,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    },
-    {
-      "id": "sixty four",
-      "type": "rectangle",
-      "pos": {
-        "x": 119,
-        "y": 928
-      },
-      "width": 314,
-      "height": 126,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "sixty four",
-      "fontSize": 64,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 269,
-      "labelHeight": 81,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    },
-    {
-      "id": "ninety nine",
-      "type": "rectangle",
-      "pos": {
-        "x": 12,
-        "y": 1356
-      },
-      "width": 529,
-      "height": 170,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "ninety nine",
-      "fontSize": 99,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 484,
-      "labelHeight": 125,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    }
-  ],
-  "connections": [
-    {
-      "id": "(eight -> sixteen)[0]",
-      "src": "eight",
-      "srcArrow": "none",
-      "srcLabel": "",
-      "dst": "sixteen",
-      "dstArrow": "triangle",
-      "dstLabel": "",
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "stroke": "#0D32B2",
-      "label": "twelve",
-      "fontSize": 12,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#676C7E",
-      "italic": true,
-      "bold": false,
-      "underline": false,
-      "labelWidth": 33,
-      "labelHeight": 16,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "labelPercentage": 0,
-      "route": [
-        {
-          "x": 276.5,
-          "y": 68
-        },
-        {
-          "x": 276.5,
-          "y": 284
-        }
-      ],
-      "animated": false,
-      "tooltip": "",
-      "icon": null,
-      "zIndex": 0
-    },
-    {
-      "id": "(sixteen -> thirty two)[0]",
-      "src": "sixteen",
-      "srcArrow": "none",
-      "srcLabel": "",
-      "dst": "thirty two",
-      "dstArrow": "triangle",
-      "dstLabel": "",
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "stroke": "#0D32B2",
-      "label": "twenty four",
-      "fontSize": 24,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#676C7E",
-      "italic": true,
-      "bold": false,
-      "underline": false,
-      "labelWidth": 114,
-      "labelHeight": 31,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "labelPercentage": 0,
-      "route": [
-        {
-          "x": 276.5,
-          "y": 350
-        },
-        {
-          "x": 276.5,
-          "y": 581
-        }
-      ],
-      "animated": false,
-      "tooltip": "",
-      "icon": null,
-      "zIndex": 0
-    },
-    {
-      "id": "(thirty two -> sixty four)[0]",
-      "src": "thirty two",
-      "srcArrow": "none",
-      "srcLabel": "",
-      "dst": "sixty four",
-      "dstArrow": "triangle",
-      "dstLabel": "",
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "stroke": "#0D32B2",
-      "label": "forty eight",
-      "fontSize": 48,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#676C7E",
-      "italic": true,
-      "bold": false,
-      "underline": false,
-      "labelWidth": 202,
-      "labelHeight": 61,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "labelPercentage": 0,
-      "route": [
-        {
-          "x": 276.5,
-          "y": 667
-        },
-        {
-          "x": 276.5,
-          "y": 928
-        }
-      ],
-      "animated": false,
-      "tooltip": "",
-      "icon": null,
-      "zIndex": 0
-    },
-    {
-      "id": "(sixty four -> ninety nine)[0]",
-      "src": "sixty four",
-      "srcArrow": "none",
-      "srcLabel": "",
-      "dst": "ninety nine",
-      "dstArrow": "triangle",
-      "dstLabel": "",
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "stroke": "#0D32B2",
-      "label": "eighty one",
-      "fontSize": 81,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#676C7E",
-      "italic": true,
-      "bold": false,
-      "underline": false,
-      "labelWidth": 341,
-      "labelHeight": 102,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "labelPercentage": 0,
-      "route": [
-        {
-          "x": 276.5,
-          "y": 1054
-        },
-        {
-          "x": 276.5,
-          "y": 1356
-        }
-      ],
-      "animated": false,
-      "tooltip": "",
-      "icon": null,
-      "zIndex": 0
-    }
-  ]
-}
diff --git a/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
deleted file mode 100644
index 28c54832a..000000000
--- a/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
+++ /dev/null
@@ -1,62 +0,0 @@
-
-eightsixteenthirty twosixty fourninety nine  twelvetwenty fourforty eighteighty one
-
-
-
-
-
-
\ No newline at end of file
diff --git a/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json b/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json
deleted file mode 100644
index bafced325..000000000
--- a/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json
+++ /dev/null
@@ -1,138 +0,0 @@
-{
-  "name": "",
-  "fontFamily": "SourceSansPro",
-  "shapes": [
-    {
-      "id": "a",
-      "type": "rectangle",
-      "pos": {
-        "x": 0,
-        "y": 0
-      },
-      "width": 53,
-      "height": 66,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "a",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 8,
-      "labelHeight": 21,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    },
-    {
-      "id": "b",
-      "type": "rectangle",
-      "pos": {
-        "x": 0,
-        "y": 372
-      },
-      "width": 53,
-      "height": 66,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "b",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 8,
-      "labelHeight": 21,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    }
-  ],
-  "connections": [
-    {
-      "id": "(a -> b)[0]",
-      "src": "a",
-      "srcArrow": "none",
-      "srcLabel": "",
-      "dst": "b",
-      "dstArrow": "triangle",
-      "dstLabel": "",
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "stroke": "#0D32B2",
-      "label": "There\nonce\nwas\na\nvery\ntall\nedge\nlabel",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#676C7E",
-      "italic": true,
-      "bold": false,
-      "underline": false,
-      "labelWidth": 38,
-      "labelHeight": 133,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "labelPercentage": 0,
-      "route": [
-        {
-          "x": 26.5,
-          "y": 66
-        },
-        {
-          "x": 26.5,
-          "y": 188.4
-        },
-        {
-          "x": 26.5,
-          "y": 249.6
-        },
-        {
-          "x": 26.5,
-          "y": 372
-        }
-      ],
-      "isCurve": true,
-      "animated": false,
-      "tooltip": "",
-      "icon": null,
-      "zIndex": 0
-    }
-  ]
-}
diff --git a/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
deleted file mode 100644
index 231114a5f..000000000
--- a/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-
-ab  Thereoncewasaverytalledgelabel
-
-
-
\ No newline at end of file
diff --git a/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json b/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json
deleted file mode 100644
index 6f0851cca..000000000
--- a/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json
+++ /dev/null
@@ -1,129 +0,0 @@
-{
-  "name": "",
-  "fontFamily": "SourceSansPro",
-  "shapes": [
-    {
-      "id": "a",
-      "type": "rectangle",
-      "pos": {
-        "x": 12,
-        "y": 12
-      },
-      "width": 53,
-      "height": 66,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "a",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 8,
-      "labelHeight": 21,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    },
-    {
-      "id": "b",
-      "type": "rectangle",
-      "pos": {
-        "x": 12,
-        "y": 411
-      },
-      "width": 53,
-      "height": 66,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "double-border": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "b",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 8,
-      "labelHeight": 21,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    }
-  ],
-  "connections": [
-    {
-      "id": "(a -> b)[0]",
-      "src": "a",
-      "srcArrow": "none",
-      "srcLabel": "",
-      "dst": "b",
-      "dstArrow": "triangle",
-      "dstLabel": "",
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "stroke": "#0D32B2",
-      "label": "There\nonce\nwas\na\nvery\ntall\nedge\nlabel",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#676C7E",
-      "italic": true,
-      "bold": false,
-      "underline": false,
-      "labelWidth": 38,
-      "labelHeight": 133,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "labelPercentage": 0,
-      "route": [
-        {
-          "x": 38.5,
-          "y": 78
-        },
-        {
-          "x": 38.5,
-          "y": 411
-        }
-      ],
-      "animated": false,
-      "tooltip": "",
-      "icon": null,
-      "zIndex": 0
-    }
-  ]
-}
diff --git a/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
deleted file mode 100644
index ce817e41e..000000000
--- a/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-
-ab  Thereoncewasaverytalledgelabel
-
-
-
\ No newline at end of file
diff --git a/e2etests/todo_test.go b/e2etests/todo_test.go
index a1a413206..32c45f052 100644
--- a/e2etests/todo_test.go
+++ b/e2etests/todo_test.go
@@ -16,57 +16,19 @@ container -> container.second: c->2
 `,
 		},
 		{
-			// issue https://github.com/terrastruct/d2/issues/263
-			name: "tall_edge_label",
-			script: `
-a -> b: There\nonce\nwas\na\nvery\ntall\nedge\nlabel
-`,
+			name: "child_parent_edges",
+			script: `a.b -> a
+a.b -> a.b.c
+a.b.c.d -> a.b`,
 		},
 		{
-			// issue https://github.com/terrastruct/d2/issues/263
-			name: "font_sizes_large",
-			script: `
-eight.style.font-size: 8
-sixteen.style.font-size: 16
-thirty two.style.font-size: 32
-sixty four.style.font-size: 64
-ninety nine.style.font-size: 99
-
-eight -> sixteen : twelve {
-	style.font-size: 12
+			name: "container_label_loop",
+			script: `a: "If we were meant to fly, we wouldn't keep losing our luggage" {
+  b -> c
 }
-sixteen -> thirty two : twenty four {
-	style.font-size: 24
-}
-thirty two -> sixty four: forty eight {
-	style.font-size: 48
-}
-sixty four -> ninety nine: eighty one {
-	style.font-size: 81
-}
-`,
+a -> a`,
 		},
 		{
-			// issue https://github.com/terrastruct/d2/issues/19
-			name: "font_sizes_containers_large",
-			script: `
-ninety nine: {
-	style.font-size: 99
-	sixty four: {
-		style.font-size: 64
-		thirty two:{
-			style.font-size: 32
-			sixteen: {
-				style.font-size: 16
-				eight: {
-					style.font-size: 8
-				}
-			}
-		}
-	}
-}
-`,
-		}, {
 			// as nesting gets deeper, the groups advance towards `c` and may overlap its lifeline
 			// needs to consider the group size when computing the distance from `a` to `c`
 			// a similar effect can be seen for spans

From 4229f52f1f56ffaa145e34c2c07f547dcdb9773a Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Fri, 10 Feb 2023 13:38:31 -0800
Subject: [PATCH 04/14] oops

---
 d2layouts/d2dagrelayout/layout.go | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go
index 6df8e9288..bb5bbe506 100644
--- a/d2layouts/d2dagrelayout/layout.go
+++ b/d2layouts/d2dagrelayout/layout.go
@@ -372,10 +372,9 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			}
 			if isSrcDesc && isDstDesc {
 				stepSize := float64(*obj.LabelHeight)
-				// Container self edges don't work right now, but when they do, this should be uncommented
-				// if e.Src != obj || e.Dst != obj {
-				//   stepSize /= 2.
-				// }
+				if e.Src != obj || e.Dst != obj {
+					stepSize /= 2.
+				}
 				movedEdges[e] = struct{}{}
 				for _, p := range e.Route {
 					p.Y += stepSize

From 9463c6755528fddb4a1dc0cad547daebeac20e92 Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Fri, 10 Feb 2023 13:40:12 -0800
Subject: [PATCH 05/14] test

---
 .../dagre/board.exp.json                      |  24 +--
 .../dagre/sketch.exp.svg                      |   4 +-
 .../dagre/board.exp.json                      |  32 ++--
 .../dagre/sketch.exp.svg                      |  10 +-
 .../elk_alignment/dagre/board.exp.json        |  64 +++----
 .../elk_alignment/dagre/sketch.exp.svg        |  18 +-
 .../elk_loop_panic/dagre/board.exp.json       |  26 +--
 .../elk_loop_panic/dagre/sketch.exp.svg       |   2 +-
 .../stable/chaos1/dagre/board.exp.json        |   8 +-
 .../stable/chaos1/dagre/sketch.exp.svg        |   4 +-
 .../stable/chaos2/dagre/board.exp.json        | 140 +++++++--------
 .../stable/chaos2/dagre/sketch.exp.svg        |  18 +-
 .../different_subgraphs/dagre/board.exp.json  |  32 ++--
 .../different_subgraphs/dagre/sketch.exp.svg  |   2 +-
 .../stable/direction/dagre/board.exp.json     |  60 +++----
 .../stable/direction/dagre/sketch.exp.svg     |   2 +-
 .../stable/investigate/dagre/board.exp.json   |  24 +--
 .../stable/investigate/dagre/sketch.exp.svg   |   2 +-
 .../stable/large_arch/dagre/board.exp.json    | 160 +++++++++---------
 .../stable/large_arch/dagre/sketch.exp.svg    |   2 +-
 .../dagre/board.exp.json                      |  48 +++---
 .../dagre/sketch.exp.svg                      |  14 +-
 .../child_parent_edges/dagre/board.exp.json   |  56 +++---
 .../child_parent_edges/dagre/sketch.exp.svg   |   2 +-
 .../container_child_edge/dagre/board.exp.json |  16 +-
 .../container_child_edge/dagre/sketch.exp.svg |   6 +-
 .../container_label_loop/dagre/board.exp.json |   8 +-
 .../container_label_loop/dagre/sketch.exp.svg |   2 +-
 28 files changed, 393 insertions(+), 393 deletions(-)

diff --git a/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/board.exp.json b/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/board.exp.json
index df4e0a899..9fa93bf6e 100644
--- a/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/board.exp.json
+++ b/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/board.exp.json
@@ -277,19 +277,19 @@
       "route": [
         {
           "x": 120,
-          "y": 157.5
+          "y": 139.5
         },
         {
           "x": 120,
-          "y": 227.9
+          "y": 209.9
         },
         {
           "x": 120,
-          "y": 263.5
+          "y": 245.5
         },
         {
           "x": 120,
-          "y": 335.5
+          "y": 317.5
         }
       ],
       "isCurve": true,
@@ -325,19 +325,19 @@
       "route": [
         {
           "x": 232.5,
-          "y": 157.5
+          "y": 139.5
         },
         {
           "x": 232.5,
-          "y": 227.9
+          "y": 209.9
         },
         {
           "x": 232.5,
-          "y": 263.5
+          "y": 245.5
         },
         {
           "x": 232.5,
-          "y": 335.5
+          "y": 317.5
         }
       ],
       "isCurve": true,
@@ -373,19 +373,19 @@
       "route": [
         {
           "x": 345,
-          "y": 157.5
+          "y": 139.5
         },
         {
           "x": 345,
-          "y": 227.9
+          "y": 209.9
         },
         {
           "x": 345,
-          "y": 263.5
+          "y": 245.5
         },
         {
           "x": 345,
-          "y": 335.5
+          "y": 317.5
         }
       ],
       "isCurve": true,
diff --git a/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
index 03d845992..7af02a256 100644
--- a/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
@@ -39,9 +39,9 @@ width="629" height="735" viewBox="-102 -105 629 735">aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
+aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
 
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
 aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
-
-
-
-
-
-
-
-
-
+aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
+
+
+
+
+
+
+
+
+
 container
they did it in style

-
a header

+container
they did it in style

+
a header

 
a line of text and an

 
{
 	indented: "block",
@@ -805,8 +805,8 @@ width="516" height="689" viewBox="-102 -105 516 689">markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

+markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

-
+

+
 
 markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

+markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

-
+

+
 
 containerscloudtall cylinderclass-
+containerscloudtall cylinderclass-
 num
 int-
 timeout
@@ -823,8 +823,8 @@ width="2482" height="2675" viewBox="-102 -105 2482 2675">Big fontabca  
+
+
+
\ No newline at end of file
diff --git a/e2etests/testdata/todo/container_icon_label/elk/board.exp.json b/e2etests/testdata/todo/container_icon_label/elk/board.exp.json
new file mode 100644
index 000000000..d1347e8a9
--- /dev/null
+++ b/e2etests/testdata/todo/container_icon_label/elk/board.exp.json
@@ -0,0 +1,302 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "a",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 353,
+      "height": 698,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/essentials/004-picture.svg",
+        "RawPath": "",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Big font",
+      "fontSize": 30,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 96,
+      "labelHeight": 38,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "a.a",
+      "type": "rectangle",
+      "pos": {
+        "x": 87,
+        "y": 87
+      },
+      "width": 203,
+      "height": 216,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 24,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 10,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.b",
+      "type": "rectangle",
+      "pos": {
+        "x": 162,
+        "y": 403
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.c",
+      "type": "rectangle",
+      "pos": {
+        "x": 162,
+        "y": 569
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "c",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.a.a",
+      "type": "rectangle",
+      "pos": {
+        "x": 162,
+        "y": 162
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    }
+  ],
+  "connections": [
+    {
+      "id": "a.(a -> b)[0]",
+      "src": "a.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a.b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 188.5,
+          "y": 303
+        },
+        {
+          "x": 188.5,
+          "y": 403
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "a.(b -> c)[0]",
+      "src": "a.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a.c",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 188.5,
+          "y": 469
+        },
+        {
+          "x": 188.5,
+          "y": 569
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
diff --git a/e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg b/e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg
new file mode 100644
index 000000000..c37c34e2e
--- /dev/null
+++ b/e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg
@@ -0,0 +1,59 @@
+
+Big fontabca  
+
+
+
\ No newline at end of file
diff --git a/e2etests/todo_test.go b/e2etests/todo_test.go
index 32c45f052..5d5953cdd 100644
--- a/e2etests/todo_test.go
+++ b/e2etests/todo_test.go
@@ -204,6 +204,19 @@ Office chatter: {
     }
   }
 }
+`,
+		},
+		{
+			// https://github.com/terrastruct/d2/issues/791
+			name: "container_icon_label",
+			script: `a: Big font {
+  icon: https://icons.terrastruct.com/essentials/004-picture.svg
+	style.font-size: 30
+  a -> b -> c
+  a: {
+    a
+  }
+}
 `,
 		},
 	}

From a677194a08d25429e2ffe65085c300b8ff5850c2 Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Fri, 10 Feb 2023 14:15:39 -0800
Subject: [PATCH 09/14] changelog

---
 ci/release/changelogs/next.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index fd95f04a1..e34faad22 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -23,6 +23,7 @@
 - Code snippets use bold and italic font styles as determined by highlighter [#710](https://github.com/terrastruct/d2/issues/710), [#741](https://github.com/terrastruct/d2/issues/741)
 - Reduces default padding of shapes. [#702](https://github.com/terrastruct/d2/pull/702)
 - Ensures labels fit inside shapes with shape-specific inner bounding boxes. [#702](https://github.com/terrastruct/d2/pull/702)
+- dagre container labels changed positions to outside the shape. Many previously obscured container labels are now legible. [#788](https://github.com/terrastruct/d2/pull/788)
 - Improves package shape dimensions with short height. [#702](https://github.com/terrastruct/d2/pull/702)
 - Keeps person shape from becoming too distorted. [#702](https://github.com/terrastruct/d2/pull/702)
 - Ensures shapes with icons have enough padding for their labels. [#702](https://github.com/terrastruct/d2/pull/702)

From 279b82b5c6aba528bd4bd59f7bb13ad7ca05a77c Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Fri, 10 Feb 2023 14:28:43 -0800
Subject: [PATCH 10/14] comments

---
 d2layouts/d2dagrelayout/layout.go | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go
index 8233dce79..ea23ec1d3 100644
--- a/d2layouts/d2dagrelayout/layout.go
+++ b/d2layouts/d2dagrelayout/layout.go
@@ -345,11 +345,14 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			continue
 		}
 
-		subtract := go2.Min(rootAttrs.ranksep/2, *obj.LabelHeight+label.PADDING)
+		// usually you don't want to take away here more than what was added, which is the label height
+		// however, if the label height is more than the ranksep/2, we'll have no padding around children anymore
+		// so cap the amount taken off at ranksep/2
+		subtract := float64(go2.Min(rootAttrs.ranksep/2, *obj.LabelHeight+label.PADDING))
 
-		// This was artifically added to make dagre consider label height
-		obj.Height -= float64(subtract)
+		obj.Height -= subtract
 
+		// If the edge is connected to two descendants that are about to be downshifted, their whole route gets downshifted
 		movedEdges := make(map[*d2graph.Edge]struct{})
 		for _, e := range g.Edges {
 			currSrc := e.Src
@@ -373,7 +376,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 				currDst = currDst.Parent
 			}
 			if isSrcDesc && isDstDesc {
-				stepSize := float64(subtract)
+				stepSize := subtract
+				// loops
 				if e.Src != obj || e.Dst != obj {
 					stepSize /= 2.
 				}
@@ -384,13 +388,13 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			}
 		}
 
-		// Downshift descendents
+		// Downshift descendents and edges that have one endpoint connected to a descendant
 		q := []*d2graph.Object{obj}
 		for len(q) > 0 {
 			curr := q[0]
 			q = q[1:]
 
-			stepSize := float64(subtract)
+			stepSize := subtract
 			if curr != obj {
 				stepSize /= 2.
 			}

From 2e5612697f70c8b66aa9e84ce084acc3002ffea6 Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Fri, 10 Feb 2023 14:28:52 -0800
Subject: [PATCH 11/14] ooops

---
 d2layouts/d2dagrelayout/layout.go | 1 -
 1 file changed, 1 deletion(-)

diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go
index ea23ec1d3..fd2423644 100644
--- a/d2layouts/d2dagrelayout/layout.go
+++ b/d2layouts/d2dagrelayout/layout.go
@@ -377,7 +377,6 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			}
 			if isSrcDesc && isDstDesc {
 				stepSize := subtract
-				// loops
 				if e.Src != obj || e.Dst != obj {
 					stepSize /= 2.
 				}

From 0877c349ad1aeca3a4800ca74b091f83fef54912 Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Fri, 10 Feb 2023 14:30:05 -0800
Subject: [PATCH 12/14] comments

---
 d2layouts/d2dagrelayout/layout.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go
index fd2423644..e7776d0b7 100644
--- a/d2layouts/d2dagrelayout/layout.go
+++ b/d2layouts/d2dagrelayout/layout.go
@@ -394,6 +394,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			q = q[1:]
 
 			stepSize := subtract
+			// The object itself needs to move down the height it was just subtracted
+			// all descendents move half, to maintain vertical padding
 			if curr != obj {
 				stepSize /= 2.
 			}

From 8ff4cf97ad4568611028cefc7f94707541386c46 Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Fri, 10 Feb 2023 20:41:17 -0800
Subject: [PATCH 13/14] continue connecting directly

---
 d2layouts/d2dagrelayout/layout.go | 178 +++++++++++++++++-------------
 1 file changed, 99 insertions(+), 79 deletions(-)

diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go
index e7776d0b7..f391bf8ff 100644
--- a/d2layouts/d2dagrelayout/layout.go
+++ b/d2layouts/d2dagrelayout/layout.go
@@ -261,6 +261,105 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 				}
 			}
 		}
+		points = points[startIndex:endIndex]
+		points[0] = start
+		points[len(points)-1] = end
+
+		edge.Route = points
+	}
+
+	for _, obj := range g.Objects {
+		if obj.LabelHeight == nil || len(obj.ChildrenArray) <= 0 {
+			continue
+		}
+
+		// usually you don't want to take away here more than what was added, which is the label height
+		// however, if the label height is more than the ranksep/2, we'll have no padding around children anymore
+		// so cap the amount taken off at ranksep/2
+		subtract := float64(go2.Min(rootAttrs.ranksep/2, *obj.LabelHeight+label.PADDING))
+
+		obj.Height -= subtract
+
+		// If the edge is connected to two descendants that are about to be downshifted, their whole route gets downshifted
+		movedEdges := make(map[*d2graph.Edge]struct{})
+		for _, e := range g.Edges {
+			currSrc := e.Src
+			currDst := e.Dst
+
+			isSrcDesc := false
+			isDstDesc := false
+
+			for currSrc != nil {
+				if currSrc == obj {
+					isSrcDesc = true
+					break
+				}
+				currSrc = currSrc.Parent
+			}
+			for currDst != nil {
+				if currDst == obj {
+					isDstDesc = true
+					break
+				}
+				currDst = currDst.Parent
+			}
+			if isSrcDesc && isDstDesc {
+				stepSize := subtract
+				if e.Src != obj || e.Dst != obj {
+					stepSize /= 2.
+				}
+				movedEdges[e] = struct{}{}
+				for _, p := range e.Route {
+					p.Y += stepSize
+				}
+			}
+		}
+
+		// Downshift descendents and edges that have one endpoint connected to a descendant
+		q := []*d2graph.Object{obj}
+		for len(q) > 0 {
+			curr := q[0]
+			q = q[1:]
+
+			stepSize := subtract
+			// The object itself needs to move down the height it was just subtracted
+			// all descendents move half, to maintain vertical padding
+			if curr != obj {
+				stepSize /= 2.
+			}
+			curr.TopLeft.Y += stepSize
+			// Edge should only move if it's not connected to the bottom side of the shrinking container
+			shouldMove := func(p *geo.Point) bool {
+				if curr != obj {
+					return true
+				}
+				return p.Y != obj.TopLeft.Y+obj.Height
+			}
+			for _, e := range g.Edges {
+				if _, ok := movedEdges[e]; ok {
+					continue
+				}
+				if e.Src == curr {
+					if shouldMove(e.Route[0]) {
+						e.Route[0].Y += stepSize
+					}
+				}
+				if e.Dst == curr {
+					if shouldMove(e.Route[len(e.Route)-1]) {
+						e.Route[len(e.Route)-1].Y += stepSize
+					}
+				}
+			}
+			for _, c := range curr.ChildrenArray {
+				q = append(q, c)
+			}
+		}
+	}
+
+	for _, edge := range g.Edges {
+		points := edge.Route
+		startIndex, endIndex := 0, len(points)-1
+		start, end := points[startIndex], points[endIndex]
 
 		// arrowheads can appear broken if segments are very short from dagre routing a point just outside the shape
 		// to fix this, we try extending the previous segment into the shape instead of having a very short segment
@@ -340,85 +439,6 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 		}
 	}
 
-	for _, obj := range g.Objects {
-		if obj.LabelHeight == nil || len(obj.ChildrenArray) <= 0 {
-			continue
-		}
-
-		// usually you don't want to take away here more than what was added, which is the label height
-		// however, if the label height is more than the ranksep/2, we'll have no padding around children anymore
-		// so cap the amount taken off at ranksep/2
-		subtract := float64(go2.Min(rootAttrs.ranksep/2, *obj.LabelHeight+label.PADDING))
-
-		obj.Height -= subtract
-
-		// If the edge is connected to two descendants that are about to be downshifted, their whole route gets downshifted
-		movedEdges := make(map[*d2graph.Edge]struct{})
-		for _, e := range g.Edges {
-			currSrc := e.Src
-			currDst := e.Dst
-
-			isSrcDesc := false
-			isDstDesc := false
-
-			for currSrc != nil {
-				if currSrc == obj {
-					isSrcDesc = true
-					break
-				}
-				currSrc = currSrc.Parent
-			}
-			for currDst != nil {
-				if currDst == obj {
-					isDstDesc = true
-					break
-				}
-				currDst = currDst.Parent
-			}
-			if isSrcDesc && isDstDesc {
-				stepSize := subtract
-				if e.Src != obj || e.Dst != obj {
-					stepSize /= 2.
-				}
-				movedEdges[e] = struct{}{}
-				for _, p := range e.Route {
-					p.Y += stepSize
-				}
-			}
-		}
-
-		// Downshift descendents and edges that have one endpoint connected to a descendant
-		q := []*d2graph.Object{obj}
-		for len(q) > 0 {
-			curr := q[0]
-			q = q[1:]
-
-			stepSize := subtract
-			// The object itself needs to move down the height it was just subtracted
-			// all descendents move half, to maintain vertical padding
-			if curr != obj {
-				stepSize /= 2.
-			}
-			curr.TopLeft.Y += stepSize
-			if curr != obj {
-				for _, e := range g.Edges {
-					if _, ok := movedEdges[e]; ok {
-						continue
-					}
-					if e.Src == curr {
-						e.Route[0].Y += stepSize
-					}
-					if e.Dst == curr {
-						e.Route[len(e.Route)-1].Y += stepSize
-					}
-				}
-			}
-			for _, c := range curr.ChildrenArray {
-				q = append(q, c)
-			}
-		}
-	}
-
 	return nil
 }
 

From c33676a41689faa1a484dfd414ccd445dd502c93 Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Fri, 10 Feb 2023 20:47:58 -0800
Subject: [PATCH 14/14] ok

---
 d2layouts/d2dagrelayout/layout.go             |   4 +-
 .../d2sketch/testdata/animated/sketch.exp.svg |   2 +-
 .../testdata/child_to_child/sketch.exp.svg    |   2 +-
 .../dagre/board.exp.json                      |  20 +-
 .../dagre/sketch.exp.svg                      |   4 +-
 .../dagre/board.exp.json                      |  16 +-
 .../dagre/sketch.exp.svg                      |  10 +-
 .../child_to_child/dagre/board.exp.json       |   4 +-
 .../child_to_child/dagre/sketch.exp.svg       |   2 +-
 .../stable/chaos1/dagre/board.exp.json        |   2 +-
 .../stable/chaos1/dagre/sketch.exp.svg        |   4 +-
 .../stable/chaos2/dagre/board.exp.json        |  46 +-
 .../stable/chaos2/dagre/sketch.exp.svg        |  12 +-
 .../child_parent_edges/dagre/board.exp.json   | 379 ++++++++++++++++
 .../child_parent_edges/dagre/sketch.exp.svg   |  59 +++
 .../child_parent_edges/elk/board.exp.json     | 297 +++++++++++++
 .../child_parent_edges/elk/sketch.exp.svg     |  59 +++
 .../connected_container/dagre/board.exp.json  |   8 +-
 .../connected_container/dagre/sketch.exp.svg  |   2 +-
 .../container_edges/dagre/board.exp.json      |  14 +-
 .../container_edges/dagre/sketch.exp.svg      |   2 +-
 .../different_subgraphs/dagre/board.exp.json  |   4 +-
 .../different_subgraphs/dagre/sketch.exp.svg  |   2 +-
 .../stable/direction/dagre/board.exp.json     |  12 +-
 .../stable/direction/dagre/sketch.exp.svg     |   2 +-
 .../stable/investigate/dagre/board.exp.json   |  88 ++--
 .../stable/investigate/dagre/sketch.exp.svg   |   8 +-
 .../stable/large_arch/dagre/board.exp.json    |  34 +-
 .../stable/large_arch/dagre/sketch.exp.svg    |   2 +-
 .../one_container_loop/dagre/board.exp.json   |   4 +-
 .../one_container_loop/dagre/sketch.exp.svg   |   2 +-
 .../dagre/board.exp.json                      |  12 +-
 .../dagre/sketch.exp.svg                      |   2 +-
 .../dagre/board.exp.json                      |  14 +-
 .../dagre/sketch.exp.svg                      |   2 +-
 .../sequence_diagrams/dagre/board.exp.json    |  10 +-
 .../sequence_diagrams/dagre/sketch.exp.svg    |   2 +-
 .../dagre/board.exp.json                      |  42 +-
 .../dagre/sketch.exp.svg                      |   2 +-
 .../child_parent_edges/dagre/board.exp.json   |   8 +-
 .../child_parent_edges/dagre/sketch.exp.svg   |   2 +-
 .../dagre/board.exp.json                      | 212 +++++++++
 .../dagre/sketch.exp.svg                      |  59 +++
 .../elk/board.exp.json                        | 212 +++++++++
 .../elk/sketch.exp.svg                        |  59 +++
 .../font_sizes_large/dagre/board.exp.json     | 405 ++++++++++++++++++
 .../font_sizes_large/dagre/sketch.exp.svg     |  62 +++
 .../todo/font_sizes_large/elk/board.exp.json  | 369 ++++++++++++++++
 .../todo/font_sizes_large/elk/sketch.exp.svg  |  62 +++
 .../todo/tall_edge_label/dagre/board.exp.json | 138 ++++++
 .../todo/tall_edge_label/dagre/sketch.exp.svg |  59 +++
 .../todo/tall_edge_label/elk/board.exp.json   | 129 ++++++
 .../todo/tall_edge_label/elk/sketch.exp.svg   |  59 +++
 53 files changed, 2823 insertions(+), 204 deletions(-)
 create mode 100644 e2etests/testdata/stable/child_parent_edges/dagre/board.exp.json
 create mode 100644 e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
 create mode 100644 e2etests/testdata/stable/child_parent_edges/elk/board.exp.json
 create mode 100644 e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
 create mode 100644 e2etests/testdata/todo/font_sizes_containers_large/dagre/board.exp.json
 create mode 100644 e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg
 create mode 100644 e2etests/testdata/todo/font_sizes_containers_large/elk/board.exp.json
 create mode 100644 e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
 create mode 100644 e2etests/testdata/todo/font_sizes_large/dagre/board.exp.json
 create mode 100644 e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
 create mode 100644 e2etests/testdata/todo/font_sizes_large/elk/board.exp.json
 create mode 100644 e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
 create mode 100644 e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json
 create mode 100644 e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
 create mode 100644 e2etests/testdata/todo/tall_edge_label/elk/board.exp.json
 create mode 100644 e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg

diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go
index f391bf8ff..4e018b11f 100644
--- a/d2layouts/d2dagrelayout/layout.go
+++ b/d2layouts/d2dagrelayout/layout.go
@@ -261,7 +261,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 				}
 			}
 		}
-		points = points[startIndex:endIndex]
+		points = points[startIndex : endIndex+1]
 		points[0] = start
 		points[len(points)-1] = end
 
@@ -328,11 +328,11 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 				stepSize /= 2.
 			}
 			curr.TopLeft.Y += stepSize
-			// Edge should only move if it's not connected to the bottom side of the shrinking container
 			shouldMove := func(p *geo.Point) bool {
 				if curr != obj {
 					return true
 				}
+				// Edge should only move if it's not connected to the bottom side of the shrinking container
 				return p.Y != obj.TopLeft.Y+obj.Height
 			}
 			for _, e := range g.Edges {
diff --git a/d2renderers/d2sketch/testdata/animated/sketch.exp.svg b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg
index 847193776..921626327 100644
--- a/d2renderers/d2sketch/testdata/animated/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg
@@ -51,7 +51,7 @@ width="486" height="800" viewBox="-102 -100 486 800">aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
+aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
 
 
 
-
-
-
+
+
+
 
-
-
+
+
 abcd  
+
+
+
\ No newline at end of file
diff --git a/e2etests/testdata/stable/child_parent_edges/elk/board.exp.json b/e2etests/testdata/stable/child_parent_edges/elk/board.exp.json
new file mode 100644
index 000000000..987db0ad6
--- /dev/null
+++ b/e2etests/testdata/stable/child_parent_edges/elk/board.exp.json
@@ -0,0 +1,297 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "a",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 514,
+      "height": 621,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "a.b",
+      "type": "rectangle",
+      "pos": {
+        "x": 87,
+        "y": 87
+      },
+      "width": 364,
+      "height": 471,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 24,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "a.b.c",
+      "type": "rectangle",
+      "pos": {
+        "x": 172,
+        "y": 162
+      },
+      "width": 204,
+      "height": 216,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "c",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 9,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "a.b.c.d",
+      "type": "rectangle",
+      "pos": {
+        "x": 247,
+        "y": 237
+      },
+      "width": 54,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "d",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 9,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 4
+    }
+  ],
+  "connections": [
+    {
+      "id": "(a.b -> a)[0]",
+      "src": "a.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 162,
+          "y": 558
+        },
+        {
+          "x": 162,
+          "y": 633
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "a.(b -> b.c)[0]",
+      "src": "a.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a.b.c",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 247,
+          "y": 87
+        },
+        {
+          "x": 247,
+          "y": 162
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "a.(b.c.d -> b)[0]",
+      "src": "a.b.c.d",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a.b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 274,
+          "y": 303
+        },
+        {
+          "x": 274,
+          "y": 433
+        },
+        {
+          "x": 162,
+          "y": 433
+        },
+        {
+          "x": 162,
+          "y": 87
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
diff --git a/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
new file mode 100644
index 000000000..0a488aa47
--- /dev/null
+++ b/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
@@ -0,0 +1,59 @@
+
+abcd  
+
+
+
\ No newline at end of file
diff --git a/e2etests/testdata/stable/connected_container/dagre/board.exp.json b/e2etests/testdata/stable/connected_container/dagre/board.exp.json
index b170fadfd..498947c77 100644
--- a/e2etests/testdata/stable/connected_container/dagre/board.exp.json
+++ b/e2etests/testdata/stable/connected_container/dagre/board.exp.json
@@ -322,7 +322,7 @@
         },
         {
           "x": 120,
-          "y": 156
+          "y": 160.1
         },
         {
           "x": 120,
@@ -338,7 +338,7 @@
         },
         {
           "x": 120,
-          "y": 276
+          "y": 280.1
         },
         {
           "x": 120,
@@ -382,7 +382,7 @@
         },
         {
           "x": 120,
-          "y": 422
+          "y": 426.1
         },
         {
           "x": 120,
@@ -410,7 +410,7 @@
         },
         {
           "x": 120,
-          "y": 592
+          "y": 599.7
         },
         {
           "x": 120,
diff --git a/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg b/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
index 47b408e8e..b7cf42a18 100644
--- a/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
@@ -39,7 +39,7 @@ width="441" height="1000" viewBox="-102 -100 441 1000">ninety ninesixty fourthirty twosixteeneight
+
+
+
\ No newline at end of file
diff --git a/e2etests/testdata/todo/font_sizes_containers_large/elk/board.exp.json b/e2etests/testdata/todo/font_sizes_containers_large/elk/board.exp.json
new file mode 100644
index 000000000..dcdae1536
--- /dev/null
+++ b/e2etests/testdata/todo/font_sizes_containers_large/elk/board.exp.json
@@ -0,0 +1,212 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "ninety nine",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 664,
+      "height": 656,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "ninety nine",
+      "fontSize": 99,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 452,
+      "labelHeight": 125,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "ninety nine.sixty four",
+      "type": "rectangle",
+      "pos": {
+        "x": 87,
+        "y": 87
+      },
+      "width": 514,
+      "height": 506,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "sixty four",
+      "fontSize": 64,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 246,
+      "labelHeight": 81,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "ninety nine.sixty four.thirty two",
+      "type": "rectangle",
+      "pos": {
+        "x": 162,
+        "y": 162
+      },
+      "width": 364,
+      "height": 356,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "thirty two",
+      "fontSize": 32,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 130,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "ninety nine.sixty four.thirty two.sixteen",
+      "type": "rectangle",
+      "pos": {
+        "x": 237,
+        "y": 237
+      },
+      "width": 214,
+      "height": 206,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "sixteen",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 48,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 4
+    },
+    {
+      "id": "ninety nine.sixty four.thirty two.sixteen.eight",
+      "type": "rectangle",
+      "pos": {
+        "x": 312,
+        "y": 312
+      },
+      "width": 64,
+      "height": 56,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "eight",
+      "fontSize": 8,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 19,
+      "labelHeight": 11,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 5
+    }
+  ],
+  "connections": []
+}
diff --git a/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
new file mode 100644
index 000000000..1fe80d81c
--- /dev/null
+++ b/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
@@ -0,0 +1,59 @@
+
+ninety ninesixty fourthirty twosixteeneight
+
+
+
\ No newline at end of file
diff --git a/e2etests/testdata/todo/font_sizes_large/dagre/board.exp.json b/e2etests/testdata/todo/font_sizes_large/dagre/board.exp.json
new file mode 100644
index 000000000..2fb12da96
--- /dev/null
+++ b/e2etests/testdata/todo/font_sizes_large/dagre/board.exp.json
@@ -0,0 +1,405 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "eight",
+      "type": "rectangle",
+      "pos": {
+        "x": 233,
+        "y": 0
+      },
+      "width": 64,
+      "height": 56,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "eight",
+      "fontSize": 8,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 19,
+      "labelHeight": 11,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "sixteen",
+      "type": "rectangle",
+      "pos": {
+        "x": 216,
+        "y": 214
+      },
+      "width": 97,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "sixteen",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 52,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "thirty two",
+      "type": "rectangle",
+      "pos": {
+        "x": 171,
+        "y": 453
+      },
+      "width": 187,
+      "height": 86,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "thirty two",
+      "fontSize": 32,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 142,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "sixty four",
+      "type": "rectangle",
+      "pos": {
+        "x": 108,
+        "y": 742
+      },
+      "width": 314,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "sixty four",
+      "fontSize": 64,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 269,
+      "labelHeight": 81,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "ninety nine",
+      "type": "rectangle",
+      "pos": {
+        "x": 0,
+        "y": 1112
+      },
+      "width": 529,
+      "height": 170,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "ninety nine",
+      "fontSize": 99,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 484,
+      "labelHeight": 125,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(eight -> sixteen)[0]",
+      "src": "eight",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "sixteen",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "twelve",
+      "fontSize": 12,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 33,
+      "labelHeight": 16,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 264.5,
+          "y": 56
+        },
+        {
+          "x": 264.5,
+          "y": 119.2
+        },
+        {
+          "x": 264.5,
+          "y": 150.8
+        },
+        {
+          "x": 264.5,
+          "y": 214
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(sixteen -> thirty two)[0]",
+      "src": "sixteen",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "thirty two",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "twenty four",
+      "fontSize": 24,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 114,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 264.5,
+          "y": 280
+        },
+        {
+          "x": 264.5,
+          "y": 349.2
+        },
+        {
+          "x": 264.5,
+          "y": 383.9
+        },
+        {
+          "x": 264.5,
+          "y": 453.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(thirty two -> sixty four)[0]",
+      "src": "thirty two",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "sixty four",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "forty eight",
+      "fontSize": 48,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 202,
+      "labelHeight": 61,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 264.5,
+          "y": 539
+        },
+        {
+          "x": 264.5,
+          "y": 620.2
+        },
+        {
+          "x": 264.5,
+          "y": 660.9
+        },
+        {
+          "x": 264.5,
+          "y": 742.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(sixty four -> ninety nine)[0]",
+      "src": "sixty four",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "ninety nine",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "eighty one",
+      "fontSize": 81,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 341,
+      "labelHeight": 102,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 264.5,
+          "y": 868
+        },
+        {
+          "x": 264.5,
+          "y": 965.6
+        },
+        {
+          "x": 264.5,
+          "y": 1014.4
+        },
+        {
+          "x": 264.5,
+          "y": 1112
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
diff --git a/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
new file mode 100644
index 000000000..6d10c903d
--- /dev/null
+++ b/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
@@ -0,0 +1,62 @@
+
+eightsixteenthirty twosixty fourninety nine  twelvetwenty fourforty eighteighty one
+
+
+
+
+
+
\ No newline at end of file
diff --git a/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json b/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json
new file mode 100644
index 000000000..463f68094
--- /dev/null
+++ b/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json
@@ -0,0 +1,369 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "eight",
+      "type": "rectangle",
+      "pos": {
+        "x": 244,
+        "y": 12
+      },
+      "width": 64,
+      "height": 56,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "eight",
+      "fontSize": 8,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 19,
+      "labelHeight": 11,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "sixteen",
+      "type": "rectangle",
+      "pos": {
+        "x": 228,
+        "y": 284
+      },
+      "width": 97,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "sixteen",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 52,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "thirty two",
+      "type": "rectangle",
+      "pos": {
+        "x": 183,
+        "y": 581
+      },
+      "width": 187,
+      "height": 86,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "thirty two",
+      "fontSize": 32,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 142,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "sixty four",
+      "type": "rectangle",
+      "pos": {
+        "x": 119,
+        "y": 928
+      },
+      "width": 314,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "sixty four",
+      "fontSize": 64,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 269,
+      "labelHeight": 81,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "ninety nine",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 1356
+      },
+      "width": 529,
+      "height": 170,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "ninety nine",
+      "fontSize": 99,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 484,
+      "labelHeight": 125,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(eight -> sixteen)[0]",
+      "src": "eight",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "sixteen",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "twelve",
+      "fontSize": 12,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 33,
+      "labelHeight": 16,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 276.5,
+          "y": 68
+        },
+        {
+          "x": 276.5,
+          "y": 284
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(sixteen -> thirty two)[0]",
+      "src": "sixteen",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "thirty two",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "twenty four",
+      "fontSize": 24,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 114,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 276.5,
+          "y": 350
+        },
+        {
+          "x": 276.5,
+          "y": 581
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(thirty two -> sixty four)[0]",
+      "src": "thirty two",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "sixty four",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "forty eight",
+      "fontSize": 48,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 202,
+      "labelHeight": 61,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 276.5,
+          "y": 667
+        },
+        {
+          "x": 276.5,
+          "y": 928
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(sixty four -> ninety nine)[0]",
+      "src": "sixty four",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "ninety nine",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "eighty one",
+      "fontSize": 81,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 341,
+      "labelHeight": 102,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 276.5,
+          "y": 1054
+        },
+        {
+          "x": 276.5,
+          "y": 1356
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
diff --git a/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
new file mode 100644
index 000000000..28c54832a
--- /dev/null
+++ b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
@@ -0,0 +1,62 @@
+
+eightsixteenthirty twosixty fourninety nine  twelvetwenty fourforty eighteighty one
+
+
+
+
+
+
\ No newline at end of file
diff --git a/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json b/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json
new file mode 100644
index 000000000..bafced325
--- /dev/null
+++ b/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json
@@ -0,0 +1,138 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "a",
+      "type": "rectangle",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "b",
+      "type": "rectangle",
+      "pos": {
+        "x": 0,
+        "y": 372
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(a -> b)[0]",
+      "src": "a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "There\nonce\nwas\na\nvery\ntall\nedge\nlabel",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 133,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 26.5,
+          "y": 66
+        },
+        {
+          "x": 26.5,
+          "y": 188.4
+        },
+        {
+          "x": 26.5,
+          "y": 249.6
+        },
+        {
+          "x": 26.5,
+          "y": 372
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
diff --git a/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
new file mode 100644
index 000000000..231114a5f
--- /dev/null
+++ b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
@@ -0,0 +1,59 @@
+
+ab  Thereoncewasaverytalledgelabel
+
+
+
\ No newline at end of file
diff --git a/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json b/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json
new file mode 100644
index 000000000..6f0851cca
--- /dev/null
+++ b/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json
@@ -0,0 +1,129 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "a",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "b",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 411
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "(a -> b)[0]",
+      "src": "a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "There\nonce\nwas\na\nvery\ntall\nedge\nlabel",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 133,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 38.5,
+          "y": 78
+        },
+        {
+          "x": 38.5,
+          "y": 411
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
+}
diff --git a/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
new file mode 100644
index 000000000..ce817e41e
--- /dev/null
+++ b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
@@ -0,0 +1,59 @@
+
+ab  Thereoncewasaverytalledgelabel
+
+
+
\ No newline at end of file