Merge branch 'master' into browser-flag

ci/release/changelogs/next.md

@@ -1,9 +1,14 @@
 #### Features 🚀
 
+- `--center` flag centers the SVG in the containing viewbox. [#1056](https://github.com/terrastruct/d2/pull/1056)
+
 #### Improvements 🧹
 
 - `--browser` flag on CLI controls `BROWSER` environment variable for not opening browser in watch mode. [#1052](https://github.com/terrastruct/d2/pull/1052)
+- `elk` layout containers no longer overlap the label with children. [#1055](https://github.com/terrastruct/d2/pull/1055)
+- `<title>` attribute of HTML in watch mode is the base file name, instead of the whole path. [#1054](https://github.com/terrastruct/d2/pull/1054)
 
 #### Bugfixes ⛑️
 
+- Code blocks are not affected by uppercasing from special themes like Terminal. [#1053](https://github.com/terrastruct/d2/pull/1053)
 - Fixes fill-pattern replacement in the API. [#1051](https://github.com/terrastruct/d2/pull/1051)

ci/release/template/man/d2.1

@@ -77,6 +77,9 @@ making style maps in D2 light/dark mode specific. See
 .It Fl s , -sketch Ar false
 Renders the diagram to look like it was sketched by hand
 .Ns .
+.It Fl -center Ar flag
+Center the SVG in the containing viewbox, such as your browser screen
+.Ns .
 .It Fl -pad Ar 100
 Pixels padded around the rendered diagram
 .Ns .

d2cli/main.go

@@ -84,6 +84,10 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 		return err
 	}
 	browserFlag := ms.Opts.String("BROWSER", "browser", "", "", "browser executable that watch opens. Setting to 0 opens no browser.")
+	centerFlag, err := ms.Opts.Bool("D2_CENTER", "center", "c", false, "center the SVG in the containing viewbox, such as your browser screen")
+	if err != nil {
+		return err
+	}
 
 	ps, err := d2plugin.ListPlugins(ctx)
 	if err != nil {
@@ -233,6 +237,7 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 		w, err := newWatcher(ctx, ms, watcherOpts{
 			layoutPlugin:  plugin,
 			sketch:        *sketchFlag,
+			center:        *centerFlag,
 			themeID:       *themeFlag,
 			darkThemeID:   darkThemeFlag,
 			pad:           *padFlag,
@@ -253,7 +258,7 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 	ctx, cancel := context.WithTimeout(ctx, time.Minute*2)
 	defer cancel()
 
-	_, written, err := compile(ctx, ms, plugin, *sketchFlag, *padFlag, *themeFlag, darkThemeFlag, inputPath, outputPath, *bundleFlag, *forceAppendixFlag, pw.Page)
+	_, written, err := compile(ctx, ms, plugin, *sketchFlag, *centerFlag, *padFlag, *themeFlag, darkThemeFlag, inputPath, outputPath, *bundleFlag, *forceAppendixFlag, pw.Page)
 	if err != nil {
 		if written {
 			return fmt.Errorf("failed to fully compile (partial render written): %w", err)
@@ -263,7 +268,7 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 	return nil
 }
 
-func compile(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketch bool, pad, themeID int64, darkThemeID *int64, inputPath, outputPath string, bundle, forceAppendix bool, page playwright.Page) (_ []byte, written bool, _ error) {
+func compile(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketch, center bool, pad, themeID int64, darkThemeID *int64, inputPath, outputPath string, bundle, forceAppendix bool, page playwright.Page) (_ []byte, written bool, _ error) {
 	start := time.Now()
 	input, err := ms.ReadPath(inputPath)
 	if err != nil {
@@ -302,10 +307,10 @@ func compile(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketc
 	var svg []byte
 	if filepath.Ext(outputPath) == ".pdf" {
 		pageMap := pdf.BuildPDFPageMap(diagram, nil, nil)
-		svg, err = renderPDF(ctx, ms, plugin, sketch, pad, themeID, outputPath, page, ruler, diagram, nil, nil, pageMap)
+		svg, err = renderPDF(ctx, ms, plugin, sketch, center, pad, themeID, outputPath, page, ruler, diagram, nil, nil, pageMap)
 	} else {
 		compileDur := time.Since(start)
-		svg, err = render(ctx, ms, compileDur, plugin, sketch, pad, themeID, darkThemeID, inputPath, outputPath, bundle, forceAppendix, page, ruler, diagram)
+		svg, err = render(ctx, ms, compileDur, plugin, sketch, center, pad, themeID, darkThemeID, inputPath, outputPath, bundle, forceAppendix, page, ruler, diagram)
 	}
 	if err != nil {
 		return svg, false, err
@@ -319,7 +324,7 @@ func compile(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketc
 	return svg, true, nil
 }
 
-func render(ctx context.Context, ms *xmain.State, compileDur time.Duration, plugin d2plugin.Plugin, sketch bool, pad int64, themeID int64, darkThemeID *int64, inputPath, outputPath string, bundle, forceAppendix bool, page playwright.Page, ruler *textmeasure.Ruler, diagram *d2target.Diagram) ([]byte, error) {
+func render(ctx context.Context, ms *xmain.State, compileDur time.Duration, plugin d2plugin.Plugin, sketch, center bool, pad int64, themeID int64, darkThemeID *int64, inputPath, outputPath string, bundle, forceAppendix bool, page playwright.Page, ruler *textmeasure.Ruler, diagram *d2target.Diagram) ([]byte, error) {
 	if diagram.Name != "" {
 		ext := filepath.Ext(outputPath)
 		outputPath = strings.TrimSuffix(outputPath, ext)
@@ -363,19 +368,19 @@ func render(ctx context.Context, ms *xmain.State, compileDur time.Duration, plug
 	}
 
 	for _, dl := range diagram.Layers {
-		_, err := render(ctx, ms, compileDur, plugin, sketch, pad, themeID, darkThemeID, inputPath, layersOutputPath, bundle, forceAppendix, page, ruler, dl)
+		_, err := render(ctx, ms, compileDur, plugin, sketch, center, pad, themeID, darkThemeID, inputPath, layersOutputPath, bundle, forceAppendix, page, ruler, dl)
 		if err != nil {
 			return nil, err
 		}
 	}
 	for _, dl := range diagram.Scenarios {
-		_, err := render(ctx, ms, compileDur, plugin, sketch, pad, themeID, darkThemeID, inputPath, scenariosOutputPath, bundle, forceAppendix, page, ruler, dl)
+		_, err := render(ctx, ms, compileDur, plugin, sketch, center, pad, themeID, darkThemeID, inputPath, scenariosOutputPath, bundle, forceAppendix, page, ruler, dl)
 		if err != nil {
 			return nil, err
 		}
 	}
 	for _, dl := range diagram.Steps {
-		_, err := render(ctx, ms, compileDur, plugin, sketch, pad, themeID, darkThemeID, inputPath, stepsOutputPath, bundle, forceAppendix, page, ruler, dl)
+		_, err := render(ctx, ms, compileDur, plugin, sketch, center, pad, themeID, darkThemeID, inputPath, stepsOutputPath, bundle, forceAppendix, page, ruler, dl)
 		if err != nil {
 			return nil, err
 		}
@@ -383,7 +388,7 @@ func render(ctx context.Context, ms *xmain.State, compileDur time.Duration, plug
 
 	if !diagram.IsFolderOnly {
 		start := time.Now()
-		svg, err := _render(ctx, ms, plugin, sketch, pad, themeID, darkThemeID, boardOutputPath, bundle, forceAppendix, page, ruler, diagram)
+		svg, err := _render(ctx, ms, plugin, sketch, center, pad, themeID, darkThemeID, boardOutputPath, bundle, forceAppendix, page, ruler, diagram)
 		if err != nil {
 			return svg, err
 		}
@@ -395,11 +400,12 @@ func render(ctx context.Context, ms *xmain.State, compileDur time.Duration, plug
 	return nil, nil
 }
 
-func _render(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketch bool, pad int64, themeID int64, darkThemeID *int64, outputPath string, bundle, forceAppendix bool, page playwright.Page, ruler *textmeasure.Ruler, diagram *d2target.Diagram) ([]byte, error) {
+func _render(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketch, center bool, pad int64, themeID int64, darkThemeID *int64, outputPath string, bundle, forceAppendix bool, page playwright.Page, ruler *textmeasure.Ruler, diagram *d2target.Diagram) ([]byte, error) {
 	toPNG := filepath.Ext(outputPath) == ".png"
 	svg, err := d2svg.Render(diagram, &d2svg.RenderOpts{
 		Pad:           int(pad),
 		Sketch:        sketch,
+		Center:        center,
 		ThemeID:       themeID,
 		DarkThemeID:   darkThemeID,
 		SetDimensions: toPNG,
@@ -461,7 +467,7 @@ func _render(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketc
 	return svg, nil
 }
 
-func renderPDF(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketch bool, pad, themeID int64, outputPath string, page playwright.Page, ruler *textmeasure.Ruler, diagram *d2target.Diagram, pdf *pdflib.GoFPDF, boardPath []string, pageMap map[string]int) (svg []byte, err error) {
+func renderPDF(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, sketch, center bool, pad, themeID int64, outputPath string, page playwright.Page, ruler *textmeasure.Ruler, diagram *d2target.Diagram, pdf *pdflib.GoFPDF, boardPath []string, pageMap map[string]int) (svg []byte, err error) {
 	var isRoot bool
 	if pdf == nil {
 		pdf = pdflib.Init()
@@ -489,6 +495,7 @@ func renderPDF(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, ske
 		svg, err = d2svg.Render(diagram, &d2svg.RenderOpts{
 			Pad:           int(pad),
 			Sketch:        sketch,
+			Center:        center,
 			SetDimensions: true,
 		})
 		if err != nil {
@@ -529,19 +536,19 @@ func renderPDF(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, ske
 	}
 
 	for _, dl := range diagram.Layers {
-		_, err := renderPDF(ctx, ms, plugin, sketch, pad, themeID, "", page, ruler, dl, pdf, currBoardPath, pageMap)
+		_, err := renderPDF(ctx, ms, plugin, sketch, center, pad, themeID, "", page, ruler, dl, pdf, currBoardPath, pageMap)
 		if err != nil {
 			return nil, err
 		}
 	}
 	for _, dl := range diagram.Scenarios {
-		_, err := renderPDF(ctx, ms, plugin, sketch, pad, themeID, "", page, ruler, dl, pdf, currBoardPath, pageMap)
+		_, err := renderPDF(ctx, ms, plugin, sketch, center, pad, themeID, "", page, ruler, dl, pdf, currBoardPath, pageMap)
 		if err != nil {
 			return nil, err
 		}
 	}
 	for _, dl := range diagram.Steps {
-		_, err := renderPDF(ctx, ms, plugin, sketch, pad, themeID, "", page, ruler, dl, pdf, currBoardPath, pageMap)
+		_, err := renderPDF(ctx, ms, plugin, sketch, center, pad, themeID, "", page, ruler, dl, pdf, currBoardPath, pageMap)
 		if err != nil {
 			return nil, err
 		}

d2cli/watch.go

@@ -44,6 +44,7 @@ type watcherOpts struct {
 	darkThemeID   *int64
 	pad           int64
 	sketch        bool
+	center        bool
 	host          string
 	port          string
 	inputPath     string
@@ -359,7 +360,7 @@ func (w *watcher) compileLoop(ctx context.Context) error {
 			w.pw = newPW
 		}
 
-		svg, _, err := compile(ctx, w.ms, w.layoutPlugin, w.sketch, w.pad, w.themeID, w.darkThemeID, w.inputPath, w.outputPath, w.bundle, w.forceAppendix, w.pw.Page)
+		svg, _, err := compile(ctx, w.ms, w.layoutPlugin, w.sketch, w.center, w.pad, w.themeID, w.darkThemeID, w.inputPath, w.outputPath, w.bundle, w.forceAppendix, w.pw.Page)
 		errs := ""
 		if err != nil {
 			if len(svg) > 0 {
@@ -433,7 +434,7 @@ func (w *watcher) handleRoot(hw http.ResponseWriter, r *http.Request) {
 	<div id="d2-err" style="display: none"></div>
 	<div id="d2-svg-container"></div>
 </body>
-</html>`, w.outputPath, w.devMode)
+</html>`, filepath.Base(w.outputPath), w.devMode)
 }
 
 func (w *watcher) handleWatch(hw http.ResponseWriter, r *http.Request) error {

d2graph/d2graph.go

@@ -1300,7 +1300,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 			continue
 		}
 
-		if g.Theme != nil && g.Theme.SpecialRules.CapsLock {
+		if g.Theme != nil && g.Theme.SpecialRules.CapsLock && !strings.EqualFold(obj.Attributes.Shape.Value, d2target.ShapeCode) {
 			obj.Attributes.Label.Value = strings.ToUpper(obj.Attributes.Label.Value)
 		}
 
@@ -1450,7 +1450,7 @@ func (g *Graph) Texts() []*d2target.MText {
 	for _, obj := range g.Objects {
 		if obj.Attributes.Label.Value != "" {
 			text := obj.Text()
-			if capsLock {
+			if capsLock && !strings.EqualFold(obj.Attributes.Shape.Value, d2target.ShapeCode) {
 				text.Text = strings.ToUpper(text.Text)
 			}
 			texts = appendTextDedup(texts, text)

d2layouts/d2elklayout/layout.go

@@ -248,20 +248,31 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			}
 
 			if n.LayoutOptions.Padding == DefaultOpts.Padding {
-				// Default
+				labelHeight := 0
-				paddingTop := 50
 				if obj.LabelHeight != nil {
-					paddingTop = go2.Max(paddingTop, *obj.LabelHeight+label.PADDING)
+					labelHeight = *obj.LabelHeight + label.PADDING
 				}
+
+				n.Height += 100 + float64(labelHeight)
+				n.Width += 100
+				contentBox := geo.NewBox(geo.NewPoint(0, 0), float64(n.Width), float64(n.Height))
+				shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[obj.Attributes.Shape.Value]
+				s := shape.NewShape(shapeType, contentBox)
+
+				paddingTop := n.Height - s.GetInnerBox().Height
+				n.Height -= (100 + float64(labelHeight))
+				n.Width -= 100
+
+				iconHeight := 0
 				if obj.Attributes.Icon != nil && obj.Attributes.Shape.Value != d2target.ShapeImage {
-					contentBox := geo.NewBox(geo.NewPoint(0, 0), float64(n.Width), float64(n.Height))
+					iconHeight = d2target.GetIconSize(s.GetInnerBox(), string(label.InsideTopLeft)) + label.PADDING*2
-					shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[obj.Attributes.Shape.Value]
-					s := shape.NewShape(shapeType, contentBox)
-					iconSize := d2target.GetIconSize(s.GetInnerBox(), string(label.InsideTopLeft))
-					paddingTop = go2.Max(paddingTop, iconSize+label.PADDING*2)
 				}
+
+				paddingTop += float64(go2.Max(labelHeight, iconHeight))
+
 				n.LayoutOptions.Padding = fmt.Sprintf("[top=%d,left=50,bottom=50,right=50]",
-					paddingTop,
+					// Default padding
+					go2.Max(int(math.Ceil(paddingTop)), 50),
 				)
 			}
 		} else {

d2renderers/d2svg/d2svg.go

@@ -71,6 +71,7 @@ var grain string
 type RenderOpts struct {
 	Pad         int
 	Sketch      bool
+	Center      bool
 	ThemeID     int64
 	DarkThemeID *int64
 	// disables the fit to screen behavior and ensures the exported svg has the exact dimensions
@@ -1828,9 +1829,14 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 		dimensions = fmt.Sprintf(` width="%d" height="%d"`, w, h)
 	}
 
-	fitToScreenWrapper := fmt.Sprintf(`<svg %s d2Version="%s" preserveAspectRatio="xMinYMin meet" viewBox="0 0 %d %d"%s>`,
+	alignment := "xMinYMin"
+	if opts.Center {
+		alignment = "xMidYMid"
+	}
+	fitToScreenWrapper := fmt.Sprintf(`<svg %s d2Version="%s" preserveAspectRatio="%s meet" viewBox="0 0 %d %d"%s>`,
 		`xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"`,
 		version.Version,
+		alignment,
 		w, h,
 		dimensions,
 	)

e2etests-cli/main_test.go

@@ -45,6 +45,16 @@ func TestCLI_E2E(t *testing.T) {
 				testdataIgnoreDiff(t, ".png", png)
 			},
 		},
+		{
+			name: "center",
+			run: func(t *testing.T, ctx context.Context, dir string, env *xos.Env) {
+				writeFile(t, dir, "hello-world.d2", `x -> y`)
+				err := runTestMain(t, ctx, dir, env, "--center=true", "hello-world.d2")
+				assert.Success(t, err)
+				svg := readFile(t, dir, "hello-world.svg")
+				assert.Testdata(t, ".svg", svg)
+			},
+		},
 		{
 			name:   "hello_world_png_sketch",
 			skipCI: true,

e2etests/stable_test.go

@@ -81,6 +81,14 @@ func testStable(t *testing.T) {
 				}
 			`,
 		},
+		{
+			name: "elk_container_height",
+			script: `i can not see the title: {
+  shape: cylinder
+  x
+}
+`,
+		},
 		{
 			name: "elk_shim",
 			script: `network: {

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

@@ -11,7 +11,7 @@
         "y": 12
       },
       "width": 701,
-      "height": 1812,
+      "height": 1835,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -52,7 +52,7 @@
         "y": 612
       },
       "width": 525,
-      "height": 1067,
+      "height": 1090,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -90,7 +90,7 @@
       "type": "rectangle",
       "pos": {
         "x": 203,
-        "y": 939
+        "y": 962
       },
       "width": 334,
       "height": 690,
@@ -131,7 +131,7 @@
       "type": "rectangle",
       "pos": {
         "x": 253,
-        "y": 989
+        "y": 1012
       },
       "width": 193,
       "height": 166,
@@ -172,7 +172,7 @@
       "type": "text",
       "pos": {
         "x": 303,
-        "y": 1084
+        "y": 1107
       },
       "width": 16,
       "height": 21,
@@ -212,7 +212,7 @@
       "type": "rectangle",
       "pos": {
         "x": 339,
-        "y": 1039
+        "y": 1062
       },
       "width": 57,
       "height": 66,
@@ -253,7 +253,7 @@
       "type": "text",
       "pos": {
         "x": 358,
-        "y": 1331
+        "y": 1354
       },
       "width": 80,
       "height": 21,
@@ -293,7 +293,7 @@
       "type": "rectangle",
       "pos": {
         "x": 367,
-        "y": 1513
+        "y": 1536
       },
       "width": 63,
       "height": 66,
@@ -337,7 +337,7 @@
         "y": 662
       },
       "width": 150,
-      "height": 192,
+      "height": 215,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -375,7 +375,7 @@
       "type": "diamond",
       "pos": {
         "x": 162,
-        "y": 712
+        "y": 735
       },
       "width": 50,
       "height": 92,
@@ -416,7 +416,7 @@
       "type": "oval",
       "pos": {
         "x": 285,
-        "y": 721
+        "y": 732
       },
       "width": 74,
       "height": 74,
@@ -645,19 +645,19 @@
       "route": [
         {
           "x": 311,
-          "y": 1105
+          "y": 1128
         },
         {
           "x": 311,
-          "y": 1291
+          "y": 1314
         },
         {
           "x": 385.16666666666663,
-          "y": 1291
+          "y": 1314
         },
         {
           "x": 385.16666666666663,
-          "y": 1331
+          "y": 1354
         }
       ],
       "animated": false,
@@ -693,11 +693,11 @@
       "route": [
         {
           "x": 398.5,
-          "y": 1352
+          "y": 1375
         },
         {
           "x": 398.5,
-          "y": 1513
+          "y": 1536
         }
       ],
       "animated": false,
@@ -733,19 +733,19 @@
       "route": [
         {
           "x": 212,
-          "y": 854
+          "y": 877
         },
         {
           "x": 212,
-          "y": 894
+          "y": 917
         },
         {
           "x": 321,
-          "y": 894
+          "y": 917
         },
         {
           "x": 321,
-          "y": 989
+          "y": 1012
         }
       ],
       "animated": false,
@@ -841,7 +841,7 @@
         },
         {
           "x": 403.5,
-          "y": 939
+          "y": 962
         }
       ],
       "animated": false,
@@ -977,15 +977,15 @@
         },
         {
           "x": 486,
-          "y": 1291
+          "y": 1314
         },
         {
           "x": 411.8333333333333,
-          "y": 1291
+          "y": 1314
         },
         {
           "x": 411.8333333333333,
-          "y": 1331
+          "y": 1354
         }
       ],
       "animated": false,
@@ -1069,15 +1069,15 @@
       "route": [
         {
           "x": 342.8333333333333,
-          "y": 1629
+          "y": 1652
         },
         {
           "x": 342.8333333333333,
-          "y": 1724
+          "y": 1747
         },
         {
           "x": 627,
-          "y": 1724
+          "y": 1747
         },
         {
           "x": 627,
@@ -1125,15 +1125,15 @@
       "route": [
         {
           "x": 162,
-          "y": 854
+          "y": 877
         },
         {
           "x": 162,
-          "y": 1774
+          "y": 1797
         },
         {
           "x": 654,
-          "y": 1774
+          "y": 1797
         },
         {
           "x": 654,

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

@@ -0,0 +1,130 @@
+{
+  "name": "",
+  "isFolderOnly": false,
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "i can not see the title",
+      "type": "cylinder",
+      "pos": {
+        "x": 0,
+        "y": 41
+      },
+      "width": 133,
+      "height": 125,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "AA4",
+      "stroke": "B1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i can not see the title",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 241,
+      "labelHeight": 36,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i can not see the title.x",
+      "type": "rectangle",
+      "pos": {
+        "x": 40,
+        "y": 70
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B5",
+      "stroke": "B1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}

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

@@ -0,0 +1,130 @@
+{
+  "name": "",
+  "isFolderOnly": false,
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "i can not see the title",
+      "type": "cylinder",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 286,
+      "height": 229,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "AA4",
+      "stroke": "B1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "i can not see the title",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 241,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "i can not see the title.x",
+      "type": "rectangle",
+      "pos": {
+        "x": 128,
+        "y": 125
+      },
+      "width": 53,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B5",
+      "stroke": "B1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "x",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 8,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}

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

@@ -585,7 +585,7 @@
         "y": 3469
       },
       "width": 327,
-      "height": 166,
+      "height": 229,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -623,7 +623,7 @@
       "type": "rectangle",
       "pos": {
         "x": 129,
-        "y": 3519
+        "y": 3582
       },
       "width": 63,
       "height": 66,
@@ -1045,7 +1045,7 @@
       "type": "rectangle",
       "pos": {
         "x": 212,
-        "y": 3519
+        "y": 3582
       },
       "width": 62,
       "height": 66,
@@ -1221,7 +1221,7 @@
       "type": "rectangle",
       "pos": {
         "x": 294,
-        "y": 3519
+        "y": 3582
       },
       "width": 62,
       "height": 66,
@@ -1262,7 +1262,7 @@
       "type": "parallelogram",
       "pos": {
         "x": 267,
-        "y": 3710
+        "y": 3773
       },
       "width": 115,
       "height": 66,
@@ -1796,7 +1796,7 @@
         },
         {
           "x": 160.58333333333331,
-          "y": 3519
+          "y": 3582
         }
       ],
       "animated": false,
@@ -2188,7 +2188,7 @@
         },
         {
           "x": 243.08333333333331,
-          "y": 3519
+          "y": 3582
         }
       ],
       "animated": false,
@@ -2364,7 +2364,7 @@
         },
         {
           "x": 325.08333333333337,
-          "y": 3519
+          "y": 3582
         }
       ],
       "animated": false,
@@ -2400,11 +2400,11 @@
       "route": [
         {
           "x": 325.0833333333333,
-          "y": 3585
+          "y": 3648
         },
         {
           "x": 325,
-          "y": 3710
+          "y": 3773
         }
       ],
       "animated": false,

e2etests/testdata/themes/terminal/dagre/board.exp.json

@@ -11,7 +11,7 @@
         "y": 438
       },
       "width": 480,
-      "height": 1225,
+      "height": 1565,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -53,7 +53,7 @@
         "y": 503
       },
       "width": 364,
-      "height": 317,
+      "height": 657,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -92,7 +92,7 @@
       "type": "stored_data",
       "pos": {
         "x": 136,
-        "y": 535
+        "y": 705
       },
       "width": 161,
       "height": 66,
@@ -133,7 +133,7 @@
       "type": "rectangle",
       "pos": {
         "x": 238,
-        "y": 722
+        "y": 1062
       },
       "width": 151,
       "height": 66,
@@ -174,7 +174,7 @@
       "type": "rectangle",
       "pos": {
         "x": 20,
-        "y": 1482
+        "y": 1822
       },
       "width": 157,
       "height": 151,
@@ -216,7 +216,7 @@
       "type": "hexagon",
       "pos": {
         "x": 71,
-        "y": 1523
+        "y": 1863
       },
       "width": 65,
       "height": 69,
@@ -257,7 +257,7 @@
       "type": "rectangle",
       "pos": {
         "x": 218,
-        "y": 977
+        "y": 1317
       },
       "width": 192,
       "height": 182,
@@ -299,7 +299,7 @@
       "type": "cylinder",
       "pos": {
         "x": 258,
-        "y": 1009
+        "y": 1349
       },
       "width": 112,
       "height": 118,
@@ -381,7 +381,7 @@
       "type": "rectangle",
       "pos": {
         "x": 521,
-        "y": 1239
+        "y": 1579
       },
       "width": 142,
       "height": 66,
@@ -422,7 +422,7 @@
       "type": "page",
       "pos": {
         "x": 551,
-        "y": 1476
+        "y": 1816
       },
       "width": 82,
       "height": 87,
@@ -745,6 +745,46 @@
       "labelHeight": 119,
       "zIndex": 0,
       "level": 1
+    },
+    {
+      "id": "code",
+      "type": "code",
+      "pos": {
+        "x": 526,
+        "y": 497
+      },
+      "width": 868,
+      "height": 406,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "N7",
+      "stroke": "N1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "package main\n\nimport (\n\t\"fmt\"\n)\n\ntype City struct {\n\tName       string\n\tPopulation int\n}\n\nfunc tellTale(city1, city2 City) {\n\tfmt.Printf(\"There were two cities, %s and %s.\\n\", city1.Name, city2.Name)\n\tfmt.Printf(\"%s had a population of %d.\\n\", city1.Name, city1.Population)\n\tfmt.Printf(\"%s had a population of %d.\\n\", city2.Name, city2.Population)\n\tfmt.Println(\"Their tales were intertwined, and their people shared many adventures.\")\n}\n\nfunc main() {\n\tcity1 := City{Name: \"CityA\", Population: 1000000}\n\tcity2 := City{Name: \"CityB\", Population: 1200000}\n\n\ttellTale(city1, city2)\n}",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "golang",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 863,
+      "labelHeight": 401,
+      "zIndex": 0,
+      "level": 1
     }
   ],
   "connections": [
@@ -774,20 +814,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 201,
+          "x": 211,
-          "y": 602
+          "y": 772
         },
         {
-          "x": 179,
+          "x": 181,
-          "y": 650
+          "y": 956
         },
         {
           "x": 191.7,
-          "y": 674.2
+          "y": 1014.2
         },
         {
           "x": 264.5,
-          "y": 723
+          "y": 1063
         }
       ],
       "isCurve": true,
@@ -822,20 +862,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 226,
+          "x": 220,
-          "y": 602
+          "y": 772
         },
         {
-          "x": 239.8,
+          "x": 238.6,
-          "y": 650
+          "y": 956
         },
         {
           "x": 252.25,
-          "y": 674.2
+          "y": 1014.2
         },
         {
           "x": 288.25,
-          "y": 723
+          "y": 1063
         }
       ],
       "isCurve": true,
@@ -870,20 +910,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 290,
+          "x": 238,
-          "y": 602
+          "y": 772
         },
         {
-          "x": 395.2,
+          "x": 356.2,
-          "y": 650
+          "y": 956
         },
         {
-          "x": 407.5,
+          "x": 376.35,
-          "y": 674.2
+          "y": 1014.2
         },
         {
-          "x": 351.5,
+          "x": 338.75,
-          "y": 723
+          "y": 1063
         }
       ],
       "isCurve": true,
@@ -919,31 +959,31 @@
       "route": [
         {
           "x": 313.5,
-          "y": 788.5
+          "y": 1128.5
         },
         {
           "x": 313.5,
-          "y": 814.1
+          "y": 1154.1
         },
         {
           "x": 313.5,
-          "y": 832.6
+          "y": 1172.6
         },
         {
           "x": 313.5,
-          "y": 850.75
+          "y": 1190.75
         },
         {
           "x": 313.5,
-          "y": 868.9
+          "y": 1208.9
         },
         {
           "x": 313.6,
-          "y": 955.2
+          "y": 1295.2
         },
         {
           "x": 314,
-          "y": 1010
+          "y": 1350
         }
       ],
       "isCurve": true,
@@ -1059,143 +1099,143 @@
         },
         {
           "x": 76.25,
-          "y": 463.6
+          "y": 497.6
         },
         {
           "x": 76.25,
-          "y": 488.5
+          "y": 573.5
         },
         {
           "x": 76.25,
-          "y": 513.4
+          "y": 649.4
         },
         {
           "x": 76.25,
-          "y": 548.7
+          "y": 752.7
         },
         {
           "x": 76.25,
-          "y": 576.75
+          "y": 831.75
         },
         {
           "x": 76.25,
-          "y": 604.8
+          "y": 910.8
         },
         {
           "x": 76.25,
-          "y": 642.2
+          "y": 982.2
         },
         {
           "x": 76.25,
-          "y": 670.25
+          "y": 1010.25
         },
         {
           "x": 76.25,
-          "y": 698.3
+          "y": 1038.3
         },
         {
           "x": 76.25,
-          "y": 733.6
+          "y": 1073.6
         },
         {
           "x": 76.25,
-          "y": 758.5
+          "y": 1098.5
         },
         {
           "x": 76.25,
-          "y": 783.4
+          "y": 1123.4
         },
         {
           "x": 76.25,
-          "y": 812.1
+          "y": 1152.1
         },
         {
           "x": 76.25,
-          "y": 830.25
+          "y": 1170.25
         },
         {
           "x": 76.25,
-          "y": 848.4
+          "y": 1188.4
         },
         {
           "x": 76.25,
-          "y": 872.6
+          "y": 1212.6
         },
         {
           "x": 76.25,
-          "y": 890.75
+          "y": 1230.75
         },
         {
           "x": 76.25,
-          "y": 908.9
+          "y": 1248.9
         },
         {
           "x": 76.25,
-          "y": 942.8
+          "y": 1282.8
         },
         {
           "x": 76.25,
-          "y": 975.5
+          "y": 1315.5
         },
         {
           "x": 76.25,
-          "y": 1008.2
+          "y": 1348.2
         },
         {
           "x": 76.25,
-          "y": 1051.8
+          "y": 1391.8
         },
         {
           "x": 76.25,
-          "y": 1084.5
+          "y": 1424.5
         },
         {
           "x": 76.25,
-          "y": 1117.2
+          "y": 1457.2
         },
         {
           "x": 76.25,
-          "y": 1149
+          "y": 1489
         },
         {
           "x": 76.25,
-          "y": 1164
+          "y": 1504
         },
         {
           "x": 76.25,
-          "y": 1179
+          "y": 1519
         },
         {
           "x": 76.25,
-          "y": 1205.6
+          "y": 1545.6
         },
         {
           "x": 76.25,
-          "y": 1230.5
+          "y": 1570.5
         },
         {
           "x": 76.25,
-          "y": 1255.4
+          "y": 1595.4
         },
         {
           "x": 76.25,
-          "y": 1290.7
+          "y": 1630.7
         },
         {
           "x": 76.25,
-          "y": 1318.75
+          "y": 1658.75
         },
         {
           "x": 76.25,
-          "y": 1346.8
+          "y": 1686.8
         },
         {
           "x": 79.6,
-          "y": 1445.6
+          "y": 1785.6
         },
         {
           "x": 93,
-          "y": 1524
+          "y": 1864
         }
       ],
       "isCurve": true,
@@ -1231,19 +1271,19 @@
       "route": [
         {
           "x": 520.5,
-          "y": 1286.4080303852415
+          "y": 1626.4080303852415
         },
         {
           "x": 208.7,
-          "y": 1349.6816060770484
+          "y": 1689.6816060770484
         },
         {
           "x": 127.4,
-          "y": 1445.6
+          "y": 1785.6
         },
         {
           "x": 114,
-          "y": 1524
+          "y": 1864
         }
       ],
       "isCurve": true,
@@ -1279,19 +1319,19 @@
       "route": [
         {
           "x": 591.5,
-          "y": 1305
+          "y": 1645
         },
         {
           "x": 591.5,
-          "y": 1353.4
+          "y": 1693.4
         },
         {
           "x": 591.6,
-          "y": 1436
+          "y": 1776
         },
         {
           "x": 592,
-          "y": 1476
+          "y": 1816
         }
       ],
       "isCurve": true,
@@ -1327,19 +1367,79 @@
       "route": [
         {
           "x": 313.5,
-          "y": 1159.5
+          "y": 1499.5
         },
         {
           "x": 313.5,
-          "y": 1183.1
+          "y": 1523.1
         },
         {
           "x": 354.9,
-          "y": 1201.3604316546762
+          "y": 1541.3604316546762
         },
         {
           "x": 520.5,
-          "y": 1250.8021582733813
+          "y": 1590.8021582733813
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(markdown -> code)[0]",
+      "src": "markdown",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "code",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 959.5,
+          "y": 198.5
+        },
+        {
+          "x": 959.5,
+          "y": 308.9
+        },
+        {
+          "x": 959.5,
+          "y": 348.6
+        },
+        {
+          "x": 959.5,
+          "y": 366.75
+        },
+        {
+          "x": 959.5,
+          "y": 384.9
+        },
+        {
+          "x": 959.5,
+          "y": 457
+        },
+        {
+          "x": 959.5,
+          "y": 497
         }
       ],
       "isCurve": true,

e2etests/testdata/themes/terminal/elk/board.exp.json

@@ -8,7 +8,7 @@
       "type": "rectangle",
       "pos": {
         "x": 12,
-        "y": 524
+        "y": 909
       },
       "width": 611,
       "height": 902,
@@ -50,7 +50,7 @@
       "type": "rectangle",
       "pos": {
         "x": 62,
-        "y": 574
+        "y": 959
       },
       "width": 261,
       "height": 413,
@@ -92,7 +92,7 @@
       "type": "stored_data",
       "pos": {
         "x": 112,
-        "y": 624
+        "y": 1009
       },
       "width": 161,
       "height": 66,
@@ -133,7 +133,7 @@
       "type": "rectangle",
       "pos": {
         "x": 117,
-        "y": 871
+        "y": 1256
       },
       "width": 151,
       "height": 66,
@@ -174,7 +174,7 @@
       "type": "rectangle",
       "pos": {
         "x": 343,
-        "y": 579
+        "y": 964
       },
       "width": 230,
       "height": 169,
@@ -216,7 +216,7 @@
       "type": "hexagon",
       "pos": {
         "x": 418,
-        "y": 629
+        "y": 1014
       },
       "width": 80,
       "height": 69,
@@ -257,7 +257,7 @@
       "type": "rectangle",
       "pos": {
         "x": 70,
-        "y": 1158
+        "y": 1543
       },
       "width": 245,
       "height": 218,
@@ -299,7 +299,7 @@
       "type": "cylinder",
       "pos": {
         "x": 136,
-        "y": 1208
+        "y": 1593
       },
       "width": 112,
       "height": 118,
@@ -422,7 +422,7 @@
       "type": "page",
       "pos": {
         "x": 703,
-        "y": 524
+        "y": 909
       },
       "width": 82,
       "height": 87,
@@ -711,7 +711,7 @@
       "type": "text",
       "pos": {
         "x": 1243,
-        "y": 90
+        "y": 169
       },
       "width": 128,
       "height": 119,
@@ -745,6 +745,46 @@
       "labelHeight": 119,
       "zIndex": 0,
       "level": 1
+    },
+    {
+      "id": "code",
+      "type": "code",
+      "pos": {
+        "x": 873,
+        "y": 418
+      },
+      "width": 868,
+      "height": 406,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "N7",
+      "stroke": "N1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "package main\n\nimport (\n\t\"fmt\"\n)\n\ntype City struct {\n\tName       string\n\tPopulation int\n}\n\nfunc tellTale(city1, city2 City) {\n\tfmt.Printf(\"There were two cities, %s and %s.\\n\", city1.Name, city2.Name)\n\tfmt.Printf(\"%s had a population of %d.\\n\", city1.Name, city1.Population)\n\tfmt.Printf(\"%s had a population of %d.\\n\", city2.Name, city2.Population)\n\tfmt.Println(\"Their tales were intertwined, and their people shared many adventures.\")\n}\n\nfunc main() {\n\tcity1 := City{Name: \"CityA\", Population: 1000000}\n\tcity2 := City{Name: \"CityB\", Population: 1200000}\n\n\ttellTale(city1, city2)\n}",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "golang",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 863,
+      "labelHeight": 401,
+      "zIndex": 0,
+      "level": 1
     }
   ],
   "connections": [
@@ -775,11 +815,11 @@
       "route": [
         {
           "x": 143,
-          "y": 690
+          "y": 1075
         },
         {
           "x": 143.5,
-          "y": 871
+          "y": 1256
         }
       ],
       "animated": false,
@@ -814,11 +854,11 @@
       "route": [
         {
           "x": 192,
-          "y": 690
+          "y": 1075
         },
         {
           "x": 192.5,
-          "y": 871
+          "y": 1256
         }
       ],
       "animated": false,
@@ -853,11 +893,11 @@
       "route": [
         {
           "x": 241,
-          "y": 690
+          "y": 1075
         },
         {
           "x": 241.5,
-          "y": 871
+          "y": 1256
         }
       ],
       "animated": false,
@@ -892,11 +932,11 @@
       "route": [
         {
           "x": 192.5,
-          "y": 937
+          "y": 1322
         },
         {
           "x": 193,
-          "y": 1208
+          "y": 1593
         }
       ],
       "animated": false,
@@ -943,7 +983,7 @@
         },
         {
           "x": 214.08333333333337,
-          "y": 574
+          "y": 959
         }
       ],
       "animated": false,
@@ -981,16 +1021,16 @@
           "y": 262
         },
         {
-          "x": 343.8333333333333,
+          "x": 343.83333333333337,
-          "y": 479
+          "y": 864
         },
         {
           "x": 444.6666666666667,
-          "y": 479
+          "y": 864
         },
         {
           "x": 445,
-          "y": 629
+          "y": 1014
         }
       ],
       "animated": false,
@@ -1029,15 +1069,15 @@
         },
         {
           "x": 573.3333333333334,
-          "y": 479
+          "y": 864
         },
         {
           "x": 471.33333333333337,
-          "y": 479
+          "y": 864
         },
         {
           "x": 471,
-          "y": 629
+          "y": 1014
         }
       ],
       "animated": false,
@@ -1084,7 +1124,7 @@
         },
         {
           "x": 744,
-          "y": 524
+          "y": 909
         }
       ],
       "animated": false,
@@ -1119,15 +1159,15 @@
       "route": [
         {
           "x": 136.5,
-          "y": 1376
+          "y": 1761
         },
         {
           "x": 136.5,
-          "y": 1471
+          "y": 1856
         },
         {
           "x": 663,
-          "y": 1471
+          "y": 1856
         },
         {
           "x": 663,
@@ -1146,6 +1186,45 @@
       "tooltip": "",
       "icon": null,
       "zIndex": 0
+    },
+    {
+      "id": "(markdown -> code)[0]",
+      "src": "markdown",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "code",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 1307.8333333333333,
+          "y": 288
+        },
+        {
+          "x": 1307.8333333333333,
+          "y": 418
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
     }
   ],
   "root": {

e2etests/testdata/todo/container_label_edge_adjustment/elk/board.exp.json

@@ -52,7 +52,7 @@
         "y": 213
       },
       "width": 294,
-      "height": 166,
+      "height": 272,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -90,7 +90,7 @@
       "type": "rectangle",
       "pos": {
         "x": 119,
-        "y": 263
+        "y": 369
       },
       "width": 80,
       "height": 66,
@@ -131,7 +131,7 @@
       "type": "rectangle",
       "pos": {
         "x": 132,
-        "y": 454
+        "y": 560
       },
       "width": 54,
       "height": 66,
@@ -332,7 +332,7 @@
         },
         {
           "x": 145.66666666666669,
-          "y": 263
+          "y": 369
         }
       ],
       "animated": false,
@@ -368,11 +368,11 @@
       "route": [
         {
           "x": 159,
-          "y": 329
+          "y": 435
         },
         {
           "x": 159,
-          "y": 454
+          "y": 560
         }
       ],
       "animated": false,
@@ -420,7 +420,7 @@
         },
         {
           "x": 172.33333333333334,
-          "y": 263
+          "y": 369
         }
       ],
       "animated": false,
@@ -468,7 +468,7 @@
         },
         {
           "x": 182,
-          "y": 212
+          "y": 213
         }
       ],
       "animated": false,
@@ -508,7 +508,7 @@
         },
         {
           "x": 286,
-          "y": 281
+          "y": 326
         }
       ],
       "animated": false,

e2etests/testdata/todo/shape_set_width_height/elk/board.exp.json

@@ -11,7 +11,7 @@
         "y": 12
       },
       "width": 1388,
-      "height": 328,
+      "height": 438,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -49,7 +49,7 @@
       "type": "oval",
       "pos": {
         "x": 62,
-        "y": 76
+        "y": 131
       },
       "width": 228,
       "height": 200,
@@ -90,7 +90,7 @@
       "type": "diamond",
       "pos": {
         "x": 112,
-        "y": 144
+        "y": 199
       },
       "width": 128,
       "height": 64,
@@ -134,7 +134,7 @@
         "y": 62
       },
       "width": 414,
-      "height": 228,
+      "height": 338,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -172,7 +172,7 @@
       "type": "oval",
       "pos": {
         "x": 453,
-        "y": 112
+        "y": 222
       },
       "width": 128,
       "height": 128,
@@ -213,10 +213,10 @@
       "type": "oval",
       "pos": {
         "x": 744,
-        "y": 94
+        "y": 123
       },
       "width": 266,
-      "height": 164,
+      "height": 216,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -254,7 +254,7 @@
       "type": "hexagon",
       "pos": {
         "x": 813,
-        "y": 144
+        "y": 225
       },
       "width": 128,
       "height": 64,
@@ -295,10 +295,10 @@
       "type": "hexagon",
       "pos": {
         "x": 1030,
-        "y": 94
+        "y": 119
       },
       "width": 320,
-      "height": 164,
+      "height": 224,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -336,7 +336,7 @@
       "type": "oval",
       "pos": {
         "x": 1126,
-        "y": 144
+        "y": 229
       },
       "width": 128,
       "height": 64,
@@ -377,7 +377,7 @@
       "type": "cloud",
       "pos": {
         "x": 1420,
-        "y": 84
+        "y": 194
       },
       "width": 512,
       "height": 256,
@@ -418,7 +418,7 @@
       "type": "cylinder",
       "pos": {
         "x": 1548,
-        "y": 1280
+        "y": 1390
       },
       "width": 256,
       "height": 512,
@@ -459,7 +459,7 @@
       "type": "class",
       "pos": {
         "x": 1276,
-        "y": 610
+        "y": 720
       },
       "width": 800,
       "height": 400,
@@ -534,7 +534,7 @@
       "type": "sql_table",
       "pos": {
         "x": 1276,
-        "y": 1862
+        "y": 1972
       },
       "width": 800,
       "height": 400,
@@ -718,7 +718,7 @@
       "type": "rectangle",
       "pos": {
         "x": 2239,
-        "y": 274
+        "y": 384
       },
       "width": 114,
       "height": 66,
@@ -759,7 +759,7 @@
       "type": "text",
       "pos": {
         "x": 2096,
-        "y": 410
+        "y": 520
       },
       "width": 400,
       "height": 800,
@@ -799,7 +799,7 @@
       "type": "code",
       "pos": {
         "x": 2096,
-        "y": 1386
+        "y": 1496
       },
       "width": 400,
       "height": 300,
@@ -839,7 +839,7 @@
       "type": "code",
       "pos": {
         "x": 2200,
-        "y": 1862
+        "y": 1972
       },
       "width": 191,
       "height": 65,
@@ -904,11 +904,11 @@
       "route": [
         {
           "x": 1676,
-          "y": 339
+          "y": 449
         },
         {
           "x": 1676,
-          "y": 610
+          "y": 720
         }
       ],
       "animated": false,
@@ -944,11 +944,11 @@
       "route": [
         {
           "x": 1676,
-          "y": 1010
+          "y": 1120
         },
         {
           "x": 1676,
-          "y": 1280
+          "y": 1390
         }
       ],
       "animated": false,
@@ -984,11 +984,11 @@
       "route": [
         {
           "x": 1676,
-          "y": 1792
+          "y": 1902
         },
         {
           "x": 1676,
-          "y": 1862
+          "y": 1972
         }
       ],
       "animated": false,
@@ -1024,11 +1024,11 @@
       "route": [
         {
           "x": 2296,
-          "y": 340
+          "y": 450
         },
         {
           "x": 2296,
-          "y": 410
+          "y": 520
         }
       ],
       "animated": false,
@@ -1064,11 +1064,11 @@
       "route": [
         {
           "x": 2296,
-          "y": 1210
+          "y": 1320
         },
         {
           "x": 2296,
-          "y": 1386
+          "y": 1496
         }
       ],
       "animated": false,
@@ -1104,11 +1104,11 @@
       "route": [
         {
           "x": 2296,
-          "y": 1686
+          "y": 1796
         },
         {
           "x": 2296,
-          "y": 1862
+          "y": 1972
         }
       ],
       "animated": false,

e2etests/themes_test.go

@@ -77,6 +77,34 @@ markdown: |md
   - of
   - two cities
 |
+code: |go
+package main
+
+import (
+	"fmt"
+)
+
+type City struct {
+	Name       string
+	Population int
+}
+
+func tellTale(city1, city2 City) {
+	fmt.Printf("There were two cities, %s and %s.\n", city1.Name, city2.Name)
+	fmt.Printf("%s had a population of %d.\n", city1.Name, city1.Population)
+	fmt.Printf("%s had a population of %d.\n", city2.Name, city2.Population)
+	fmt.Println("Their tales were intertwined, and their people shared many adventures.")
+}
+
+func main() {
+	city1 := City{Name: "CityA", Population: 1000000}
+	city2 := City{Name: "CityB", Population: 1200000}
+
+	tellTale(city1, city2)
+}
+|
+
+markdown -> code
 `,
 		},
 		{