Merge branch 'master' into gh-1967-column-index

2023-01-06 16:12:33 -03:00 · 2023-01-06 16:12:33 -03:00 · 07b3032eea
commit 07b3032eea
parent 3a5e5bd113 afeac90ec9
254 changed files with 7182 additions and 870 deletions
--- a/.prettierignore
+++ b/.prettierignore
@ -3,4 +3,5 @@ d2layouts/d2elklayout/setup.js
 d2renderers/d2latex/mathjax.js
 d2renderers/d2latex/polyfills.js
 d2renderers/d2latex/setup.js
+d2renderers/d2sketch/rough.js
 lib/png/generate_png.js
--- a/README.md
+++ b/README.md
@ -214,8 +214,10 @@ let us know and we'll be happy to include it here!
 - **Postgres importer**: [https://github.com/zekenie/d2-erd-from-postgres](https://github.com/zekenie/d2-erd-from-postgres)
 - **Structurizr to D2 exporter**: [https://github.com/goto1134/structurizr-d2-exporter](https://github.com/goto1134/structurizr-d2-exporter)
 - **MdBook preprocessor**: [https://github.com/danieleades/mdbook-d2](https://github.com/danieleades/mdbook-d2)
+- **ROS2 D2 Exporter**: [https://github.com/Greenroom-Robotics/ros-d2](https://github.com/Greenroom-Robotics/ros-d2)
 - **D2 org-mode support**: [https://github.com/xcapaldi/ob-d2](https://github.com/xcapaldi/ob-d2)
 - **Python D2 diagram builder**: [https://github.com/MrBlenny/py-d2](https://github.com/MrBlenny/py-d2)
+- **Clojure D2 transpiler**: [https://github.com/judepayne/dictim](https://github.com/judepayne/dictim)

 ### Misc

--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@ -1,17 +1,17 @@
 #### Features 🚀

- Tooltips can be set on shapes. See [https://d2lang.com/tour/tooltips](https://d2lang.com/tour/interactive). [#548](https://github.com/terrastruct/d2/pull/548)
- Links can be set on shapes. See [https://d2lang.com/tour/tooltips](https://d2lang.com/tour/interactive). [#548](https://github.com/terrastruct/d2/pull/548)
- The `width` and `height` attributes are no longer restricted to images and can be applied to non-container shapes. [#498](https://github.com/terrastruct/d2/pull/498)
+- Crow foot notation is now supported. [#578](https://github.com/terrastruct/d2/pull/578)
+- Exported SVGs also fit to screen on open. [#601](https://github.com/terrastruct/d2/pull/601)

 #### Improvements 🧹

- Watch mode now renders fit to screen. [#560](https://github.com/terrastruct/d2/pull/560)
-
 #### Bugfixes ⛑️

 - Restricts where `near` key constant values can be used, with good error messages, instead of erroring (e.g. setting `near: top-center` on a container would cause bad layouts or error). [#538](https://github.com/terrastruct/d2/pull/538)
 - Fixes an error during ELK layout when images had empty labels. [#555](https://github.com/terrastruct/d2/pull/555)
 - Fixes rendering classes and tables with empty headers. [#498](https://github.com/terrastruct/d2/pull/498)
 - Fixes rendering sql tables with no columns. [#553](https://github.com/terrastruct/d2/pull/553)
- Fixes routing between sql table columns if the column name is the prefix of the table name [#615](https://github.com/terrastruct/d2/pull/615)
+- Appendix seperator line no longer added to PNG export when appendix doesn't exist. [#582](https://github.com/terrastruct/d2/pull/582)
+- Watch mode only fits to screen on initial load. [#601](https://github.com/terrastruct/d2/pull/601)
+- Dimensions (`width`/`height`) were incorrectly giving compiler errors when applied on a shape with style. [#614](https://github.com/terrastruct/d2/pull/614)
+- Fixes routing between sql table columns if the column name is the prefix of the table name [#615](https://github.com/terrastruct/d2/pull/615)
--- a/ci/release/changelogs/v0.1.4.md
+++ b/ci/release/changelogs/v0.1.4.md
@ -0,0 +1,35 @@
+This release marks the introduction of interactive diagrams. Namely, `tooltip` and `link` can now be set, which allows you to hover to see more or click to go to an external link. This small change enables many possibilities, including richer integrations like internal wiki's that can be linked together through diagrams. An icon will indicate that a shape has a tooltip that can be hovered over for more information, or a link.
+
+<img width="509" alt="Screen Shot 2022-12-30 at 6 47 45 PM" src="https://user-images.githubusercontent.com/3120367/210122771-b38003e7-2881-4708-a875-8066c465c16c.png">
+
+Since interactive features obviously won't work on static export formats like PNG, they will be included automatically in an appendix when exporting to those formats, like so:
+
+![tooltip](https://user-images.githubusercontent.com/3120367/210122793-582d3fc7-8e09-46f1-bb78-5dcc6cf1de55.png)
+
+This release also gives more power to configure layouts. `width` and `height` are D2 keywords which previouslly only worked on images, but now work on any non-containers. Additionally, all the layout engines have configurations exposed. D2 sets sensible defaults to each layout engine without any input, so this is meant to be an advanced feature for users who want that extra control.
+
+Happy new years!
+
+#### Features 🚀
+
+- Tooltips can be set on shapes. See [https://d2lang.com/tour/interactive](https://d2lang.com/tour/interactive). [#548](https://github.com/terrastruct/d2/pull/548)
+- Links can be set on shapes. See [https://d2lang.com/tour/interactive](https://d2lang.com/tour/interactive). [#548](https://github.com/terrastruct/d2/pull/548)
+- The `width` and `height` attributes are no longer restricted to images and can be applied to non-container shapes. [#498](https://github.com/terrastruct/d2/pull/498)
+- Layout engine options are exposed and configurable. See individual layout pages on [https://d2lang.com/tour/layouts](https://d2lang.com/tour/layouts) for list of configurations. [#563](https://github.com/terrastruct/d2/pull/563)
+
+#### Improvements 🧹
+
+- Watch mode renders fit to screen. [#560](https://github.com/terrastruct/d2/pull/560)
+
+#### Bugfixes ⛑️
+
+- Fixes rendering `class` and `table` with empty headers. [#498](https://github.com/terrastruct/d2/pull/498)
+- Fixes rendering of `sql_table` with no columns. [#553](https://github.com/terrastruct/d2/pull/553)
+- Diagram bounding boxes account for stroke widths. [#574](https://github.com/terrastruct/d2/pull/574)
+- Restricts where `near` key constant values can be used, with good error messages, instead of erroring (e.g. setting `near: top-center` on a container would cause bad layouts or error). [#538](https://github.com/terrastruct/d2/pull/538)
+- Fixes panic when images with empty labels are rendered with ELK. [#555](https://github.com/terrastruct/d2/pull/555)
+
+#### Breaking changes
+
+- For usages of D2 as a library, `d2dagrelayout.Layout` and `d2elklayout.Layout` now accept a third parameter for options. If you would like to keep the defaults, please change your code to call `dagrelayout.DefaultLayout` and `d2elklayout.DefaultLayout` respectively.
+
--- a/ci/release/template/man/d2.1
+++ b/ci/release/template/man/d2.1
@ -82,7 +82,7 @@ Print version information and exit.
 .It Ar layout
 Lists available layout engine options with short help.
 .It Ar layout Op Ar name
-Display long help for a particular layout engine.
+Display long help for a particular layout engine, including its configuration options.
 .It Ar fmt Ar file.d2
 Format
 .Ar file.d2
--- a/ci/sub
+++ b/ci/sub
@ -1 +1 @@
-Subproject commit b1ec0a8d430a62b7556211ed8bcd7b6e41e2362c
+Subproject commit 9a29d9ea640834905c4010c0b3d14b7301ebb6d8
--- a/cmd/d2plugin-dagre/main.go
+++ b/cmd/d2plugin-dagre/main.go
@ -9,5 +9,5 @@ import (
 )

 func main() {
-	xmain.Main(d2plugin.Serve(d2plugin.DagrePlugin))
+	xmain.Main(d2plugin.Serve(&d2plugin.DagrePlugin))
 }
--- a/d2chaos/d2chaos_test.go
+++ b/d2chaos/d2chaos_test.go
@ -123,7 +123,7 @@ func test(t *testing.T, textPath, text string) {
 		err = g.SetDimensions(nil, ruler, nil)
 		assert.Nil(t, err)

-		err = d2dagrelayout.Layout(ctx, g)
+		err = d2dagrelayout.DefaultLayout(ctx, g)
 		if err != nil {
 			t.Fatal(err)
 		}
--- a/d2compiler/compile.go
+++ b/d2compiler/compile.go
@ -836,7 +836,7 @@ func (c *compiler) validateKey(obj *d2graph.Object, m *d2ast.Map, mk *d2ast.Key)
 	switch strings.ToLower(obj.Attributes.Shape.Value) {
 	case d2target.ShapeSQLTable, d2target.ShapeClass:
 	default:
-		if len(obj.Children) > 0 && (reserved == "width" || reserved == "height") {
+		if len(obj.Children) > 0 && !(len(obj.Children) == 1 && obj.ChildrenArray[0].ID == "style") && (reserved == "width" || reserved == "height") {
 			c.errorf(mk.Range.Start, mk.Range.End, fmt.Sprintf("%s cannot be used on container: %s", reserved, obj.AbsID()))
 		}
 	}
--- a/d2compiler/compile_test.go
+++ b/d2compiler/compile_test.go
@ -208,6 +208,15 @@ d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:25:3: width ca
 d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:26:3: height cannot be used on container: containers.oval container
 d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:36:3: width cannot be used on container: containers.hexagon container
 d2/testdata/d2compiler/TestCompile/no_dimensions_on_containers.d2:37:3: height cannot be used on container: containers.hexagon container
+`,
+		},
+		{
+			name: "dimension_with_style",
+
+			text: `x: {
+  width: 200
+  style.multiple: true
+}
 `,
 		},
 		{
--- a/d2exporter/export_test.go
+++ b/d2exporter/export_test.go
@ -239,7 +239,7 @@ func run(t *testing.T, tc testCase) {
 	err = g.SetDimensions(nil, ruler, nil)
 	assert.JSON(t, nil, err)

-	err = d2sequence.Layout(ctx, g, d2dagrelayout.Layout)
+	err = d2sequence.Layout(ctx, g, d2dagrelayout.DefaultLayout)
 	if err != nil {
 		t.Fatal(err)
 	}
--- a/d2graph/d2graph.go
+++ b/d2graph/d2graph.go
@ -1067,6 +1067,22 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 		if obj.Attributes.Height != nil {
 			desiredHeight, _ = strconv.Atoi(obj.Attributes.Height.Value)
 		}
+
+		if obj.Attributes.Label.Value == "" &&
+			obj.Attributes.Shape.Value != d2target.ShapeImage &&
+			obj.Attributes.Shape.Value != d2target.ShapeSQLTable &&
+			obj.Attributes.Shape.Value != d2target.ShapeClass {
+			obj.Width = DEFAULT_SHAPE_PADDING
+			obj.Height = DEFAULT_SHAPE_PADDING
+			if desiredWidth != 0 {
+				obj.Width = float64(desiredWidth)
+			}
+			if desiredHeight != 0 {
+				obj.Height = float64(desiredHeight)
+			}
+			continue
+		}
+
 		shapeType := strings.ToLower(obj.Attributes.Shape.Value)

 		labelDims, err := obj.GetLabelSize(mtexts, ruler, fontFamily)
--- a/d2layouts/d2dagrelayout/layout.go
+++ b/d2layouts/d2dagrelayout/layout.go
@ -30,6 +30,16 @@ var setupJS string
 //go:embed dagre.js
 var dagreJS string

+type ConfigurableOpts struct {
+	NodeSep int `json:"nodesep"`
+	EdgeSep int `json:"edgesep"`
+}
+
+var DefaultOpts = ConfigurableOpts{
+	NodeSep: 60,
+	EdgeSep: 40,
+}
+
 type DagreNode struct {
 	ID     string  `json:"id"`
 	X      float64 `json:"x"`
@ -42,16 +52,23 @@ type DagreEdge struct {
 	Points []*geo.Point `json:"points"`
 }

-type dagreGraphAttrs struct {
+type dagreOpts struct {
 	// for a top to bottom graph: ranksep is y spacing, nodesep is x spacing, edgesep is x spacing
 	ranksep int
-	edgesep int
-	nodesep int
 	// graph direction: tb (top to bottom)| bt | lr | rl
 	rankdir string
+
+	ConfigurableOpts
 }

-func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
+func DefaultLayout(ctx context.Context, g *d2graph.Graph) (err error) {
+	return Layout(ctx, g, nil)
+}
+
+func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err error) {
+	if opts == nil {
+		opts = &DefaultOpts
+	}
 	defer xdefer.Errorf(&err, "failed to dagre layout")

 	debugJS := false
@ -63,9 +80,11 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 		return err
 	}

-	rootAttrs := dagreGraphAttrs{
-		edgesep: 40,
-		nodesep: 60,
+	rootAttrs := dagreOpts{
+		ConfigurableOpts: ConfigurableOpts{
+			EdgeSep: opts.EdgeSep,
+			NodeSep: opts.NodeSep,
+		},
 	}
 	isHorizontal := false
 	switch g.Root.Attributes.Direction.Value {
@ -266,7 +285,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 	return nil
 }

-func setGraphAttrs(attrs dagreGraphAttrs) string {
+func setGraphAttrs(attrs dagreOpts) string {
 	return fmt.Sprintf(`g.setGraph({
  ranksep: %d,
  edgesep: %d,
@ -275,8 +294,8 @@ func setGraphAttrs(attrs dagreGraphAttrs) string {
 });
 `,
 		attrs.ranksep,
-		attrs.edgesep,
-		attrs.nodesep,
+		attrs.ConfigurableOpts.EdgeSep,
+		attrs.ConfigurableOpts.NodeSep,
 		attrs.rankdir,
 	)
 }
--- a/d2layouts/d2elklayout/layout.go
+++ b/d2layouts/d2elklayout/layout.go
@ -31,23 +31,23 @@ var elkJS string
 var setupJS string

 type ELKNode struct {
-	ID            string            `json:"id"`
-	X             float64           `json:"x"`
-	Y             float64           `json:"y"`
-	Width         float64           `json:"width"`
-	Height        float64           `json:"height"`
-	Children      []*ELKNode        `json:"children,omitempty"`
-	Labels        []*ELKLabel       `json:"labels,omitempty"`
-	LayoutOptions *ELKLayoutOptions `json:"layoutOptions,omitempty"`
+	ID            string      `json:"id"`
+	X             float64     `json:"x"`
+	Y             float64     `json:"y"`
+	Width         float64     `json:"width"`
+	Height        float64     `json:"height"`
+	Children      []*ELKNode  `json:"children,omitempty"`
+	Labels        []*ELKLabel `json:"labels,omitempty"`
+	LayoutOptions *elkOpts    `json:"layoutOptions,omitempty"`
 }

 type ELKLabel struct {
-	Text          string            `json:"text"`
-	X             float64           `json:"x"`
-	Y             float64           `json:"y"`
-	Width         float64           `json:"width"`
-	Height        float64           `json:"height"`
-	LayoutOptions *ELKLayoutOptions `json:"layoutOptions,omitempty"`
+	Text          string   `json:"text"`
+	X             float64  `json:"x"`
+	Y             float64  `json:"y"`
+	Width         float64  `json:"width"`
+	Height        float64  `json:"height"`
+	LayoutOptions *elkOpts `json:"layoutOptions,omitempty"`
 }

 type ELKPoint struct {
@ -71,26 +71,46 @@ type ELKEdge struct {
 }

 type ELKGraph struct {
-	ID            string            `json:"id"`
-	LayoutOptions *ELKLayoutOptions `json:"layoutOptions"`
-	Children      []*ELKNode        `json:"children,omitempty"`
-	Edges         []*ELKEdge        `json:"edges,omitempty"`
+	ID            string     `json:"id"`
+	LayoutOptions *elkOpts   `json:"layoutOptions"`
+	Children      []*ELKNode `json:"children,omitempty"`
+	Edges         []*ELKEdge `json:"edges,omitempty"`
 }

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

-func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
+var DefaultOpts = ConfigurableOpts{
+	Algorithm:       "layered",
+	NodeSpacing:     100.0,
+	Padding:         "[top=75,left=75,bottom=75,right=75]",
+	EdgeNodeSpacing: 50.0,
+	SelfLoopSpacing: 50.0,
+}
+
+type elkOpts struct {
+	Direction           string `json:"elk.direction"`
+	HierarchyHandling   string `json:"elk.hierarchyHandling,omitempty"`
+	InlineEdgeLabels    bool   `json:"elk.edgeLabels.inline,omitempty"`
+	ForceNodeModelOrder bool   `json:"elk.layered.crossingMinimization.forceNodeModelOrder,omitempty"`
+	ConsiderModelOrder  string `json:"elk.layered.considerModelOrder.strategy,omitempty"`
+
+	ConfigurableOpts
+}
+
+func DefaultLayout(ctx context.Context, g *d2graph.Graph) (err error) {
+	return Layout(ctx, g, nil)
+}
+
+func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err error) {
+	if opts == nil {
+		opts = &DefaultOpts
+	}
 	defer xdefer.Errorf(&err, "failed to ELK layout")

 	vm := goja.New()
@ -109,13 +129,15 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {

 	elkGraph := &ELKGraph{
 		ID: "root",
-		LayoutOptions: &ELKLayoutOptions{
-			Algorithm:          "layered",
+		LayoutOptions: &elkOpts{
 			HierarchyHandling:  "INCLUDE_CHILDREN",
-			NodeSpacing:        100.0,
-			EdgeNodeSpacing:    50.0,
-			SelfLoopSpacing:    50.0,
 			ConsiderModelOrder: "NODES_AND_EDGES",
+			ConfigurableOpts: ConfigurableOpts{
+				Algorithm:       opts.Algorithm,
+				NodeSpacing:     opts.NodeSpacing,
+				EdgeNodeSpacing: opts.EdgeNodeSpacing,
+				SelfLoopSpacing: opts.SelfLoopSpacing,
+			},
 		},
 	}
 	switch g.Root.Attributes.Direction.Value {
@ -160,9 +182,11 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 		}

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

@ -193,7 +217,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 				Text:   edge.Attributes.Label.Value,
 				Width:  float64(edge.LabelDimensions.Width),
 				Height: float64(edge.LabelDimensions.Height),
-				LayoutOptions: &ELKLayoutOptions{
+				LayoutOptions: &elkOpts{
 					InlineEdgeLabels: true,
 				},
 			})
--- a/d2lib/c.go
+++ b/d2lib/c.go
@ -1,7 +0,0 @@
-package d2lib
-
-import "oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
-
-func init() {
-	dagreLayout = d2dagrelayout.Layout
-}
--- a/d2lib/d2.go
+++ b/d2lib/d2.go
@ -9,6 +9,7 @@ import (
 	"oss.terrastruct.com/d2/d2compiler"
 	"oss.terrastruct.com/d2/d2exporter"
 	"oss.terrastruct.com/d2/d2graph"
+	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
 	"oss.terrastruct.com/d2/d2layouts/d2near"
 	"oss.terrastruct.com/d2/d2layouts/d2sequence"
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
@ -74,12 +75,12 @@ func Compile(ctx context.Context, input string, opts *CompileOptions) (*d2target
 func getLayout(opts *CompileOptions) (func(context.Context, *d2graph.Graph) error, error) {
 	if opts.Layout != nil {
 		return opts.Layout, nil
-	} else if os.Getenv("D2_LAYOUT") == "dagre" && dagreLayout != nil {
-		return dagreLayout, nil
+	} else if os.Getenv("D2_LAYOUT") == "dagre" {
+		defaultLayout := func(ctx context.Context, g *d2graph.Graph) error {
+			return d2dagrelayout.Layout(ctx, g, nil)
+		}
+		return defaultLayout, nil
 	} else {
 		return nil, errors.New("no available layout")
 	}
 }
-
-// See c.go
-var dagreLayout func(context.Context, *d2graph.Graph) error
--- a/d2plugin/exec.go
+++ b/d2plugin/exec.go
@ -7,9 +7,11 @@ import (
 	"errors"
 	"fmt"
 	"os/exec"
+	"strconv"
 	"time"

 	"oss.terrastruct.com/util-go/xdefer"
+	"oss.terrastruct.com/util-go/xmain"

 	"oss.terrastruct.com/d2/d2graph"
 )
@ -37,9 +39,65 @@ import (
 // the error to stderr.
 type execPlugin struct {
 	path string
+	opts map[string]string
+	info *PluginInfo
 }

-func (p execPlugin) Info(ctx context.Context) (_ *PluginInfo, err error) {
+func (p *execPlugin) Flags(ctx context.Context) (_ []PluginSpecificFlag, err error) {
+	ctx, cancel := context.WithTimeout(ctx, time.Second*10)
+	defer cancel()
+	cmd := exec.CommandContext(ctx, p.path, "flags")
+	defer xdefer.Errorf(&err, "failed to run %v", cmd.Args)
+
+	stdout, err := cmd.Output()
+	if err != nil {
+		ee := &exec.ExitError{}
+		if errors.As(err, &ee) && len(ee.Stderr) > 0 {
+			return nil, fmt.Errorf("%v\nstderr:\n%s", ee, ee.Stderr)
+		}
+		return nil, err
+	}
+
+	var flags []PluginSpecificFlag
+
+	err = json.Unmarshal(stdout, &flags)
+	if err != nil {
+		return nil, fmt.Errorf("failed to unmarshal json: %w", err)
+	}
+
+	return flags, nil
+}
+
+func (p *execPlugin) HydrateOpts(opts []byte) error {
+	if opts != nil {
+		var execOpts map[string]interface{}
+		err := json.Unmarshal(opts, &execOpts)
+		if err != nil {
+			return xmain.UsageErrorf("non-exec layout options given for exec")
+		}
+
+		allString := make(map[string]string)
+		for k, v := range execOpts {
+			switch vt := v.(type) {
+			case string:
+				allString[k] = vt
+			case int64:
+				allString[k] = strconv.Itoa(int(vt))
+			case float64:
+				allString[k] = strconv.Itoa(int(vt))
+			}
+		}
+
+		p.opts = allString
+	}
+	return nil
+}
+
+func (p *execPlugin) Info(ctx context.Context) (_ *PluginInfo, err error) {
+	if p.info != nil {
+		return p.info, nil
+	}
+
 	ctx, cancel := context.WithTimeout(ctx, time.Second*10)
 	defer cancel()
 	cmd := exec.CommandContext(ctx, p.path, "info")
@ -61,10 +119,11 @@ func (p execPlugin) Info(ctx context.Context) (_ *PluginInfo, err error) {
 		return nil, fmt.Errorf("failed to unmarshal json: %w", err)
 	}

+	p.info = &info
 	return &info, nil
 }

-func (p execPlugin) Layout(ctx context.Context, g *d2graph.Graph) error {
+func (p *execPlugin) Layout(ctx context.Context, g *d2graph.Graph) error {
 	ctx, cancel := context.WithTimeout(ctx, time.Minute)
 	defer cancel()

@ -73,7 +132,11 @@ func (p execPlugin) Layout(ctx context.Context, g *d2graph.Graph) error {
 		return err
 	}

-	cmd := exec.CommandContext(ctx, p.path, "layout")
+	args := []string{"layout"}
+	for k, v := range p.opts {
+		args = append(args, fmt.Sprintf("--%s", k), v)
+	}
+	cmd := exec.CommandContext(ctx, p.path, args...)

 	buffer := bytes.Buffer{}
 	buffer.Write(graphBytes)
@ -95,7 +158,7 @@ func (p execPlugin) Layout(ctx context.Context, g *d2graph.Graph) error {
 	return nil
 }

-func (p execPlugin) PostProcess(ctx context.Context, in []byte) ([]byte, error) {
+func (p *execPlugin) PostProcess(ctx context.Context, in []byte) ([]byte, error) {
 	ctx, cancel := context.WithTimeout(ctx, time.Minute)
 	defer cancel()

--- a/d2plugin/plugin.go
+++ b/d2plugin/plugin.go
@ -7,9 +7,11 @@ package d2plugin

 import (
 	"context"
+	"encoding/json"
 	"os/exec"

 	"oss.terrastruct.com/util-go/xexec"
+	"oss.terrastruct.com/util-go/xmain"

 	"oss.terrastruct.com/d2/d2graph"
 )
@ -19,10 +21,40 @@ import (
 // See plugin_* files for the plugins available for bundling.
 var plugins []Plugin

+type PluginSpecificFlag struct {
+	Name    string
+	Type    string
+	Default interface{}
+	Usage   string
+	// Must match the tag in the opt
+	Tag string
+}
+
+func (f *PluginSpecificFlag) AddToOpts(opts *xmain.Opts) {
+	switch f.Type {
+	case "string":
+		opts.String("", f.Name, "", f.Default.(string), f.Usage)
+	case "int64":
+		var val int64
+		switch defaultType := f.Default.(type) {
+		case int64:
+			val = defaultType
+		case float64:
+			// json unmarshals numbers to float64
+			val = int64(defaultType)
+		}
+		opts.Int64("", f.Name, "", val, f.Usage)
+	}
+}
+
 type Plugin interface {
 	// Info returns the current info information of the plugin.
 	Info(context.Context) (*PluginInfo, error)

+	Flags(context.Context) ([]PluginSpecificFlag, error)
+
+	HydrateOpts([]byte) error
+
 	// Layout runs the plugin's autolayout algorithm on the input graph
 	// and returns a new graph with the computed placements.
 	Layout(context.Context, *d2graph.Graph) error
@ -48,36 +80,54 @@ type PluginInfo struct {

 const binaryPrefix = "d2plugin-"

-func ListPlugins(ctx context.Context) ([]*PluginInfo, error) {
+func ListPlugins(ctx context.Context) ([]Plugin, error) {
 	// 1. Run Info on all bundled plugins in the global plugins array.
 	//    - set Type for each bundled plugin to "bundled".
 	// 2. Iterate through directories in $PATH and look for executables within these
 	//    directories with the prefix d2plugin-*
 	// 3. Run each plugin binary with the argument info. e.g. d2plugin-dagre info

-	var infoSlice []*PluginInfo
-
-	for _, p := range plugins {
-		info, err := p.Info(ctx)
-		if err != nil {
-			return nil, err
-		}
-		info.Type = "bundled"
-		infoSlice = append(infoSlice, info)
-	}
+	var ps []Plugin
+	ps = append(ps, plugins...)

 	matches, err := xexec.SearchPath(binaryPrefix)
 	if err != nil {
 		return nil, err
 	}
+BINARY_PLUGINS_LOOP:
 	for _, path := range matches {
 		p := &execPlugin{path: path}
 		info, err := p.Info(ctx)
 		if err != nil {
 			return nil, err
 		}
-		info.Type = "binary"
-		info.Path = path
+		for _, p2 := range ps {
+			info2, err := p2.Info(ctx)
+			if err != nil {
+				return nil, err
+			}
+			if info.Name == info2.Name {
+				continue BINARY_PLUGINS_LOOP
+			}
+		}
+		ps = append(ps, p)
+	}
+	return ps, nil
+}
+
+func ListPluginInfos(ctx context.Context, ps []Plugin) ([]*PluginInfo, error) {
+	var infoSlice []*PluginInfo
+	for _, p := range ps {
+		info, err := p.Info(ctx)
+		if err != nil {
+			return nil, err
+		}
+		if ep, ok := p.(*execPlugin); ok {
+			info.Type = "binary"
+			info.Path = ep.path
+		} else {
+			info.Type = "bundled"
+		}
 		infoSlice = append(infoSlice, info)
 	}

@ -91,21 +141,53 @@ func ListPlugins(ctx context.Context) ([]*PluginInfo, error) {
 //    **NOTE** When D2 upgrades to go 1.19, remember to ignore exec.ErrDot
 // 3. If such a binary is found, it builds an execPlugin in exec.go
 //    to get a plugin implementation around the binary and returns it.
-func FindPlugin(ctx context.Context, name string) (Plugin, string, error) {
-	for _, p := range plugins {
+func FindPlugin(ctx context.Context, ps []Plugin, name string) (Plugin, error) {
+	for _, p := range ps {
 		info, err := p.Info(ctx)
 		if err != nil {
-			return nil, "", err
+			return nil, err
 		}
 		if info.Name == name {
-			return p, "", nil
+			return p, nil
+		}
+	}
+	return nil, exec.ErrNotFound
+}
+
+func ListPluginFlags(ctx context.Context, ps []Plugin) ([]PluginSpecificFlag, error) {
+	var out []PluginSpecificFlag
+	for _, p := range ps {
+		flags, err := p.Flags(ctx)
+		if err != nil {
+			return nil, err
+		}
+		out = append(out, flags...)
+	}
+
+	return out, nil
+}
+
+func HydratePluginOpts(ctx context.Context, ms *xmain.State, plugin Plugin) error {
+	opts := make(map[string]interface{})
+	flags, err := plugin.Flags(ctx)
+	if err != nil {
+		return err
+	}
+	for _, f := range flags {
+		switch f.Type {
+		case "string":
+			val, _ := ms.Opts.Flags.GetString(f.Name)
+			opts[f.Tag] = val
+		case "int64":
+			val, _ := ms.Opts.Flags.GetInt64(f.Name)
+			opts[f.Tag] = val
 		}
 	}

-	path, err := exec.LookPath(binaryPrefix + name)
+	b, err := json.Marshal(opts)
 	if err != nil {
-		return nil, "", err
+		return err
 	}

-	return &execPlugin{path: path}, path, nil
+	return plugin.HydrateOpts(b)
 }
--- a/d2plugin/plugin_dagre.go
+++ b/d2plugin/plugin_dagre.go
@ -4,36 +4,82 @@ package d2plugin

 import (
 	"context"
+	"encoding/json"
+	"fmt"

 	"oss.terrastruct.com/d2/d2graph"
 	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
+	"oss.terrastruct.com/util-go/xmain"
 )

 var DagrePlugin = dagrePlugin{}

 func init() {
-	plugins = append(plugins, DagrePlugin)
+	plugins = append(plugins, &DagrePlugin)
 }

-type dagrePlugin struct{}
+type dagrePlugin struct {
+	opts *d2dagrelayout.ConfigurableOpts
+}
+
+func (p dagrePlugin) Flags(context.Context) ([]PluginSpecificFlag, error) {
+	return []PluginSpecificFlag{
+		{
+			Name:    "dagre-nodesep",
+			Type:    "int64",
+			Default: int64(d2dagrelayout.DefaultOpts.NodeSep),
+			Usage:   "number of pixels that separate nodes horizontally.",
+			Tag:     "nodesep",
+		},
+		{
+			Name:    "dagre-edgesep",
+			Type:    "int64",
+			Default: int64(d2dagrelayout.DefaultOpts.EdgeSep),
+			Usage:   "number of pixels that separate edges horizontally.",
+			Tag:     "edgesep",
+		},
+	}, nil
+}
+
+func (p *dagrePlugin) HydrateOpts(opts []byte) error {
+	if opts != nil {
+		var dagreOpts d2dagrelayout.ConfigurableOpts
+		err := json.Unmarshal(opts, &dagreOpts)
+		if err != nil {
+			return xmain.UsageErrorf("non-dagre layout options given for dagre")
+		}
+
+		p.opts = &dagreOpts
+	}
+	return nil
+}
+
+func (p dagrePlugin) Info(ctx context.Context) (*PluginInfo, error) {
+	opts := xmain.NewOpts(nil, nil, nil)
+	flags, err := p.Flags(ctx)
+	if err != nil {
+		return nil, err
+	}
+	for _, f := range flags {
+		f.AddToOpts(opts)
+	}

-func (p dagrePlugin) Info(context.Context) (*PluginInfo, error) {
 	return &PluginInfo{
 		Name:      "dagre",
 		ShortHelp: "The directed graph layout library Dagre",
-		LongHelp: `dagre is a directed graph layout library for JavaScript.
+		LongHelp: fmt.Sprintf(`dagre is a directed graph layout library for JavaScript.
 See https://github.com/dagrejs/dagre
-The implementation of this plugin is at: https://github.com/terrastruct/d2/tree/master/d2plugin/d2dagrelayout

-note: dagre is the primary layout algorithm for text to diagram generator Mermaid.js.
-      See https://github.com/mermaid-js/mermaid
-      We have a useful comparison at https://text-to-diagram.com/?example=basic&a=d2&b=mermaid
-`,
+Flags correspond to ones found at https://github.com/dagrejs/dagre/wiki. See dagre's reference for more on each.
+
+Flags:
+%s
+`, opts.Defaults()),
 	}, nil
 }

 func (p dagrePlugin) Layout(ctx context.Context, g *d2graph.Graph) error {
-	return d2dagrelayout.Layout(ctx, g)
+	return d2dagrelayout.Layout(ctx, g, p.opts)
 }

 func (p dagrePlugin) PostProcess(ctx context.Context, in []byte) ([]byte, error) {
--- a/d2plugin/plugin_elk.go
+++ b/d2plugin/plugin_elk.go
@ -4,31 +4,103 @@ package d2plugin

 import (
 	"context"
+	"encoding/json"
+	"fmt"

 	"oss.terrastruct.com/d2/d2graph"
 	"oss.terrastruct.com/d2/d2layouts/d2elklayout"
+	"oss.terrastruct.com/util-go/xmain"
 )

 var ELKPlugin = elkPlugin{}

 func init() {
-	plugins = append(plugins, ELKPlugin)
+	plugins = append(plugins, &ELKPlugin)
 }

-type elkPlugin struct{}
+type elkPlugin struct {
+	opts *d2elklayout.ConfigurableOpts
+}

-func (p elkPlugin) Info(context.Context) (*PluginInfo, error) {
+func (p elkPlugin) Flags(context.Context) ([]PluginSpecificFlag, error) {
+	return []PluginSpecificFlag{
+		{
+			Name:    "elk-algorithm",
+			Type:    "string",
+			Default: d2elklayout.DefaultOpts.Algorithm,
+			Usage:   "layout algorithm",
+			Tag:     "elk.algorithm",
+		},
+		{
+			Name:    "elk-nodeNodeBetweenLayers",
+			Type:    "int64",
+			Default: int64(d2elklayout.DefaultOpts.NodeSpacing),
+			Usage:   "the spacing to be preserved between any pair of nodes of two adjacent layers",
+			Tag:     "spacing.nodeNodeBetweenLayers",
+		},
+		{
+			Name:    "elk-padding",
+			Type:    "string",
+			Default: d2elklayout.DefaultOpts.Padding,
+			Usage:   "the padding to be left to a parent element’s border when placing child elements",
+			Tag:     "elk.padding",
+		},
+		{
+			Name:    "elk-edgeNodeBetweenLayers",
+			Type:    "int64",
+			Default: int64(d2elklayout.DefaultOpts.EdgeNodeSpacing),
+			Usage:   "the spacing to be preserved between nodes and edges that are routed next to the node’s layer",
+			Tag:     "spacing.edgeNodeBetweenLayers",
+		},
+		{
+			Name:    "elk-nodeSelfLoop",
+			Type:    "int64",
+			Default: int64(d2elklayout.DefaultOpts.SelfLoopSpacing),
+			Usage:   "spacing to be preserved between a node and its self loops",
+			Tag:     "elk.spacing.nodeSelfLoop",
+		},
+	}, nil
+}
+
+func (p *elkPlugin) HydrateOpts(opts []byte) error {
+	if opts != nil {
+		var elkOpts d2elklayout.ConfigurableOpts
+		err := json.Unmarshal(opts, &elkOpts)
+		if err != nil {
+			return xmain.UsageErrorf("non-ELK layout options given for ELK")
+		}
+
+		p.opts = &elkOpts
+	}
+	return nil
+}
+
+func (p elkPlugin) Info(ctx context.Context) (*PluginInfo, error) {
+	opts := xmain.NewOpts(nil, nil, nil)
+	flags, err := p.Flags(ctx)
+	if err != nil {
+		return nil, err
+	}
+	for _, f := range flags {
+		f.AddToOpts(opts)
+	}
 	return &PluginInfo{
 		Name:      "elk",
 		ShortHelp: "Eclipse Layout Kernel (ELK) with the Layered algorithm.",
-		LongHelp: `ELK is a layout engine offered by Eclipse.
+		LongHelp: fmt.Sprintf(`ELK is a layout engine offered by Eclipse.
 Originally written in Java, it has been ported to Javascript and cross-compiled into D2.
-See https://github.com/kieler/elkjs for more.`,
+See https://github.com/kieler/elkjs for more.
+
+Flags correspond to ones found at https://www.eclipse.org/elk/reference.html. See ELK's reference for more on each.
+
+Flags:
+%s
+`, opts.Defaults()),
 	}, nil
 }

 func (p elkPlugin) Layout(ctx context.Context, g *d2graph.Graph) error {
-	return d2elklayout.Layout(ctx, g)
+	return d2elklayout.Layout(ctx, g, p.opts)
 }

 func (p elkPlugin) PostProcess(ctx context.Context, in []byte) ([]byte, error) {
--- a/d2plugin/serve.go
+++ b/d2plugin/serve.go
@ -21,6 +21,13 @@ import (
 // Also see execPlugin in exec.go for the d2 binary plugin protocol.
 func Serve(p Plugin) xmain.RunFunc {
 	return func(ctx context.Context, ms *xmain.State) (err error) {
+		fs, err := p.Flags(ctx)
+		if err != nil {
+			return err
+		}
+		for _, f := range fs {
+			f.AddToOpts(ms.Opts)
+		}
 		err = ms.Opts.Flags.Parse(ms.Opts.Args)
 		if !errors.Is(err, pflag.ErrHelp) && err != nil {
 			return xmain.UsageErrorf("failed to parse flags: %v", err)
@ -34,10 +41,17 @@ func Serve(p Plugin) xmain.RunFunc {
 			return xmain.UsageErrorf("expected first argument to be subcmd name")
 		}

+		err = HydratePluginOpts(ctx, ms, p)
+		if err != nil {
+			return err
+		}
+
 		subcmd := ms.Opts.Flags.Arg(0)
 		switch subcmd {
 		case "info":
 			return info(ctx, p, ms)
+		case "flags":
+			return flags(ctx, p, ms)
 		case "layout":
 			return layout(ctx, p, ms)
 		case "postprocess":
@ -64,6 +78,22 @@ func info(ctx context.Context, p Plugin, ms *xmain.State) error {
 	return nil
 }

+func flags(ctx context.Context, p Plugin, ms *xmain.State) error {
+	flags, err := p.Flags(ctx)
+	if err != nil {
+		return err
+	}
+	b, err := json.Marshal(flags)
+	if err != nil {
+		return err
+	}
+	_, err = ms.Stdout.Write(b)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
 func layout(ctx context.Context, p Plugin, ms *xmain.State) error {
 	in, err := io.ReadAll(ms.Stdin)
 	if err != nil {
--- a/d2renderers/d2sketch/rough.js
+++ b/d2renderers/d2sketch/rough.js
@ -1261,7 +1261,7 @@ class B {
      n = [];
    if (!t) return this._drawable("path", n, s);
    const i = (function (t, e) {
-      t = (t || "").replace(/\n/g, " ").replace(/(-\s)/g, "-").replace("/(ss)/g", " ");
+      t = (t || "").replace(/\n/g, " ").replace(/(-\s)/g, "-").replace("/(\s\s)/g", " ");
      let s = new o(t);
      if (e.simplification) {
        const t = new r(s.linearPoints, s.closed).fit(e.simplification);
--- a/d2renderers/d2sketch/sketch_test.go
+++ b/d2renderers/d2sketch/sketch_test.go
@ -314,7 +314,7 @@ func run(t *testing.T, tc testCase) {
 	diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
 		Ruler:      ruler,
 		ThemeID:    0,
-		Layout:     d2dagrelayout.Layout,
+		Layout:     d2dagrelayout.DefaultLayout,
 		FontFamily: go2.Pointer(d2fonts.HandDrawn),
 	})
 	if !tassert.Nil(t, err) {
--- a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/class/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/class/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="622" height="568" viewBox="-100 -100 622 568"><style type="text/css">
+width="626" height="572" viewBox="-102 -102 626 572"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -23,7 +24,27 @@ width="622" height="568" viewBox="-100 -100 622 568"><style type="text/css">
 }

 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><defs>
  <pattern id="streaks"
           x="0" y="0" width="100" height="100"
           patternUnits="userSpaceOnUse" >
@ -42,8 +63,8 @@ width="622" height="568" viewBox="-100 -100 622 568"><style type="text/css">
 <text class="text-mono" x="30.000000" y="304.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">getJobs()</text>
 <text class="text-mono" x="402.000000" y="304.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;">Job[]</text><text class="text-mono" x="10.000000" y="350.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
 <text class="text-mono" x="30.000000" y="350.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">setTimeout(seconds int)</text>
-<text class="text-mono" x="402.000000" y="350.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;">void</text></g></g><mask id="2215085970" maskUnits="userSpaceOnUse" x="-100" y="-100" width="622" height="568">
-<rect x="-100" y="-100" width="622" height="568" fill="white"></rect>
+<text class="text-mono" x="402.000000" y="350.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;">void</text></g></g><mask id="2215085970" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="572">
+<rect x="-100" y="-100" width="626" height="572" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-mono {
--- a/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1025" height="660" viewBox="-100 -100 1025 660"><style type="text/css">
+width="1029" height="664" viewBox="-102 -102 1029 664"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -23,7 +24,27 @@ width="1025" height="660" viewBox="-100 -100 1025 660"><style type="text/css">
 }

 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><defs>
  <pattern id="streaks"
           x="0" y="0" width="100" height="100"
           patternUnits="userSpaceOnUse" >
@ -62,8 +83,8 @@ width="1025" height="660" viewBox="-100 -100 1025 660"><style type="text/css">
 <text class="text" x="692.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
 <text class="text" x="805.000000" y="149.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">PK</text><path d="M501.59433286147834 162.6682524219514 C565.5797741859461 161.89597697058372, 630.2145845461888 159.89005357652763, 824.449808125711 162.27200259434863 M500.55028613275425 162.18344378127665 C573.022681364183 160.6246367782044, 644.4959209239217 160.22968799567332, 824.597631846606 162.52192031909593" style="fill:#0A0F25" /><text class="text" x="511.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">status</text>
 <text class="text" x="692.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
-<text class="text" x="805.000000" y="185.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><path d="M501.59433286147834 198.6682524219514 C565.5797741859461 197.89597697058372, 630.2145845461888 195.89005357652763, 824.449808125711 198.27200259434863 M500.55028613275425 198.18344378127665 C573.022681364183 196.6246367782044, 644.4959209239217 196.22968799567332, 824.597631846606 198.52192031909593" style="fill:#0A0F25" /><rect class="sketch-overlay" transform="translate(501 18)" width="324" height="180" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path class="connection" fill="none" d="M106.500089911744 218.34012979455292 M106.500089911744 218.34012979455292 C109.46388473920524 255.68024617619812, 142.46317125968636 281.41432731984054, 269.30913586410986 344.97808744771686 M104.76992493495345 217.54653513804078 C107.92928630625829 257.07928939396515, 139.67833609199153 282.6359475223707, 269.3942423780385 342.1546212962298" style="stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2434169672)"/></g><g id="(products &lt;-&gt; orders)[0]"><path class="connection" fill="none" d="M357.000089911744 200.34012979455292 M357.000089911744 200.34012979455292 C359.96388473920524 252.08024617619813, 360.16317125968635 275.43987631984055, 359.4053128641099 312.85726344771683 M355.26992493495345 199.54653513804078 C358.4292863062583 253.47928939396516, 357.3783360919915 276.6614965223707, 359.4904193780385 310.03379729622975" style="stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2434169672)"/></g><g id="(shipments &lt;-&gt; orders)[0]"><path class="connection" fill="none" d="M661.000089911744 200.34012979455292 M661.000089911744 200.34012979455292 C663.9638847392052 252.08024617619813, 620.7631712596864 282.8398763198405, 450.11803886410985 352.3687514477168 M659.2699249349535 199.54653513804078 C662.4292863062583 253.47928939396516, 617.9783360919915 284.0614965223707, 450.20314537803847 349.54528529622974" style="stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2434169672)"/></g><mask id="2434169672" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1025" height="660">
-<rect x="-100" y="-100" width="1025" height="660" fill="white"></rect>
+<text class="text" x="805.000000" y="185.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><path d="M501.59433286147834 198.6682524219514 C565.5797741859461 197.89597697058372, 630.2145845461888 195.89005357652763, 824.449808125711 198.27200259434863 M500.55028613275425 198.18344378127665 C573.022681364183 196.6246367782044, 644.4959209239217 196.22968799567332, 824.597631846606 198.52192031909593" style="fill:#0A0F25" /><rect class="sketch-overlay" transform="translate(501 18)" width="324" height="180" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path class="connection" fill="none" d="M106.500089911744 218.34012979455292 M106.500089911744 218.34012979455292 C109.46388473920524 255.68024617619812, 142.46317125968636 281.41432731984054, 269.30913586410986 344.97808744771686 M104.76992493495345 217.54653513804078 C107.92928630625829 257.07928939396515, 139.67833609199153 282.6359475223707, 269.3942423780385 342.1546212962298" style="stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2434169672)"/></g><g id="(products &lt;-&gt; orders)[0]"><path class="connection" fill="none" d="M357.000089911744 200.34012979455292 M357.000089911744 200.34012979455292 C359.96388473920524 252.08024617619813, 360.16317125968635 275.43987631984055, 359.4053128641099 312.85726344771683 M355.26992493495345 199.54653513804078 C358.4292863062583 253.47928939396516, 357.3783360919915 276.6614965223707, 359.4904193780385 310.03379729622975" style="stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2434169672)"/></g><g id="(shipments &lt;-&gt; orders)[0]"><path class="connection" fill="none" d="M661.000089911744 200.34012979455292 M661.000089911744 200.34012979455292 C663.9638847392052 252.08024617619813, 620.7631712596864 282.8398763198405, 450.11803886410985 352.3687514477168 M659.2699249349535 199.54653513804078 C662.4292863062583 253.47928939396516, 617.9783360919915 284.0614965223707, 450.20314537803847 349.54528529622974" style="stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2434169672)"/></g><mask id="2434169672" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1029" height="664">
+<rect x="-100" y="-100" width="1029" height="664" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
--- a/d2renderers/d2svg/appendix/appendix.go
+++ b/d2renderers/d2svg/appendix/appendix.go
@ -153,6 +153,10 @@ func generateAppendix(diagram *d2target.Diagram, ruler *textmeasure.Ruler, svg s
 			}
 		}
 	}
+	if len(lines) == 0 {
+		return "", 0, 0
+	}
+	totalHeight += SPACER

 	return fmt.Sprintf(`<g x="%d" y="%d" width="%d" height="100%%">%s</g>
 `, tl.X, br.Y, (br.X - tl.X), strings.Join(lines, "\n")), maxWidth, totalHeight
@ -182,5 +186,5 @@ func generateLine(i, y int, text string, ruler *textmeasure.Ruler) (string, int,
 	line += fmt.Sprintf(`<text class="text" x="%d" y="%d" style="font-size: %dpx;">%s</text>`,
 		ICON_RADIUS*3, y, FONT_SIZE, d2svg.RenderText(text, ICON_RADIUS*3, float64(dims.Height)))

-	return line, dims.Width + ICON_RADIUS*3, dims.Height
+	return line, dims.Width + ICON_RADIUS*3, go2.IntMax(dims.Height, ICON_RADIUS*2)
 }
--- a/d2renderers/d2svg/appendix/appendix_test.go
+++ b/d2renderers/d2svg/appendix/appendix_test.go
@ -121,7 +121,7 @@ func run(t *testing.T, tc testCase) {
 	diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
 		Ruler:   ruler,
 		ThemeID: 0,
-		Layout:  d2dagrelayout.Layout,
+		Layout:  d2dagrelayout.DefaultLayout,
 	})
 	if !tassert.Nil(t, err) {
 		return
--- a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
--- a/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
--- a/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@ -74,6 +74,7 @@ func setViewbox(writer io.Writer, diagram *d2target.Diagram, pad int) (width int
 	// TODO background stuff. e.g. dotted, grid, colors
 	fmt.Fprintf(writer, `<?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="%d" height="%d" viewBox="%d %d %d %d">`, w, h, tl.X-pad, tl.Y-pad, w, h)
@ -113,6 +114,9 @@ func arrowheadDimensions(arrowhead d2target.Arrowhead, strokeWidth float64) (wid
 	case d2target.DiamondArrowhead:
 		widthMultiplier = 11
 		heightMultiplier = 9
+	case d2target.CfOne, d2target.CfMany, d2target.CfOneRequired, d2target.CfManyRequired:
+		widthMultiplier = 14
+		heightMultiplier = 15
 	}

 	clippedStrokeWidth := go2.Max(MIN_ARROWHEAD_STROKE_WIDTH, strokeWidth)
@ -220,6 +224,45 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 				width*0.6, height*7/8,
 			)
 		}
+	case d2target.CfOne, d2target.CfMany, d2target.CfOneRequired, d2target.CfManyRequired:
+		attrs := fmt.Sprintf(`class="connection" stroke="%s" stroke-width="%d" fill="white"`, connection.Stroke, connection.StrokeWidth)
+		offset := 4.0 + float64(connection.StrokeWidth*2)
+		var modifier string
+		if arrowhead == d2target.CfOneRequired || arrowhead == d2target.CfManyRequired {
+			modifier = fmt.Sprintf(`<path %s d="M%f,%f %f,%f"/>`,
+				attrs,
+				offset, 0.,
+				offset, height,
+			)
+		} else {
+			modifier = fmt.Sprintf(`<circle %s cx="%f" cy="%f" r="%f"/>`,
+				attrs,
+				offset/2.0+1.0, height/2.0,
+				offset/2.0,
+			)
+		}
+		if !isTarget {
+			attrs = fmt.Sprintf(`%s transform="scale(-1) translate(-%f, -%f)"`, attrs, width, height)
+		}
+		if arrowhead == d2target.CfMany || arrowhead == d2target.CfManyRequired {
+			path = fmt.Sprintf(`<g %s>%s<path d="M%f,%f %f,%f M%f,%f %f,%f M%f,%f %f,%f"/></g>`,
+				attrs, modifier,
+				width-3.0, height/2.0,
+				width+offset, height/2.0,
+				offset+2.0, height/2.0,
+				width+offset, 0.,
+				offset+2.0, height/2.0,
+				width+offset, height,
+			)
+		} else {
+			path = fmt.Sprintf(`<g %s>%s<path d="M%f,%f %f,%f M%f,%f %f,%f"/></g>`,
+				attrs, modifier,
+				width-3.0, height/2.0,
+				width+offset, height/2.0,
+				offset*1.8, 0.,
+				offset*1.8, height,
+			)
+		}
 	default:
 		return ""
 	}
@ -1054,6 +1097,9 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
 	buf.WriteString(`]]></style>`)
 }

+//go:embed fitToScreen.js
+var fitToScreenScript string
+
 // TODO minify output at end
 func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	var sketchRunner *d2sketch.Runner
@ -1082,6 +1128,10 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 ]]>
 </style>`, styleCSS, styleCSS2))

+	// this script won't run in --watch mode because script tags are ignored when added via el.innerHTML = element
+	// https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
+	buf.WriteString(fmt.Sprintf(`<script type="application/javascript"><![CDATA[%s]]></script>`, fitToScreenScript))
+
 	hasMarkdown := false
 	for _, s := range diagram.Shapes {
 		if s.Label != "" && s.Type == d2target.ShapeText {
--- a/d2renderers/d2svg/fitToScreen.js
+++ b/d2renderers/d2svg/fitToScreen.js
@ -0,0 +1,20 @@
+window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
--- a/d2target/d2target.go
+++ b/d2target/d2target.go
@ -55,10 +55,16 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
 	y2 := int(math.MinInt32)

 	for _, targetShape := range diagram.Shapes {
-		x1 = go2.Min(x1, targetShape.Pos.X)
-		y1 = go2.Min(y1, targetShape.Pos.Y)
-		x2 = go2.Max(x2, targetShape.Pos.X+targetShape.Width)
-		y2 = go2.Max(y2, targetShape.Pos.Y+targetShape.Height)
+		x1 = go2.Min(x1, targetShape.Pos.X-targetShape.StrokeWidth)
+		y1 = go2.Min(y1, targetShape.Pos.Y-targetShape.StrokeWidth)
+		x2 = go2.Max(x2, targetShape.Pos.X+targetShape.Width+targetShape.StrokeWidth)
+		y2 = go2.Max(y2, targetShape.Pos.Y+targetShape.Height+targetShape.StrokeWidth)
+
+		if targetShape.Tooltip != "" || targetShape.Link != "" {
+			// 16 is the icon radius
+			y1 = go2.Min(y1, targetShape.Pos.Y-targetShape.StrokeWidth-16)
+			x2 = go2.Max(x2, targetShape.Pos.X+targetShape.StrokeWidth+targetShape.Width+16)
+		}

 		if targetShape.Label != "" {
 			labelPosition := label.Position(targetShape.LabelPosition)
@ -274,6 +280,12 @@ const (

 	// For fat arrows
 	LineArrowhead Arrowhead = "line"
+
+	// Crows feet notation
+	CfOne          Arrowhead = "cf-one"
+	CfMany         Arrowhead = "cf-many"
+	CfOneRequired  Arrowhead = "cf-one-required"
+	CfManyRequired Arrowhead = "cf-many-required"
 )

 var Arrowheads = map[string]struct{}{
@ -282,6 +294,10 @@ var Arrowheads = map[string]struct{}{
 	string(TriangleArrowhead):      {},
 	string(DiamondArrowhead):       {},
 	string(FilledDiamondArrowhead): {},
+	string(CfOne):                  {},
+	string(CfMany):                 {},
+	string(CfOneRequired):          {},
+	string(CfManyRequired):         {},
 }

 func ToArrowhead(arrowheadType string, filled bool) Arrowhead {
@ -293,6 +309,14 @@ func ToArrowhead(arrowheadType string, filled bool) Arrowhead {
 		return DiamondArrowhead
 	case string(ArrowArrowhead):
 		return ArrowArrowhead
+	case string(CfOne):
+		return CfOne
+	case string(CfMany):
+		return CfMany
+	case string(CfOneRequired):
+		return CfOneRequired
+	case string(CfManyRequired):
+		return CfManyRequired
 	default:
 		return TriangleArrowhead
 	}
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@ -17,6 +17,20 @@ Most of D2's CI is open sourced in its own
 workflows. E.g. run `./make.sh fmt` to run the formatter. Please make sure all CI is
 passing for any PRs.

+Most of the CI scripts rely on a submodule shared between many D2 repositories:
+[https://github.com/terrastruct/ci](https://github.com/terrastruct/ci). You should fetch
+the submodule whenever it differs:
+
+```sh
+git submodule update --recursive
+```
+
+If running for the first time for a repo (e.g. new clone), add `--init`:
+
+```sh
+git submodule update --init --recursive
+```
+
 ## Flow

 The simplified D2 flow at a package level looks like:
@ -25,6 +39,9 @@ The simplified D2 flow at a package level looks like:

 ## Logistics

+- Use Go 1.18. Go 1.19's autofmt inexplicably strips spacing from ASCII art in comments.
+- Please sign your commits
+  ([https://github.com/terrastruct/d2/pull/557#issuecomment-1367468730](https://github.com/terrastruct/d2/pull/557#issuecomment-1367468730)).
 - D2 uses Issues as TODOs. No auto-closing on staleness.
 - Branch off `master`.
 - Prefix pull request titles with a short descriptor of the domain, e.g. `d2renderer: Add
--- a/docs/INSTALL.md
+++ b/docs/INSTALL.md
@ -179,7 +179,7 @@ Remember, you need at least Go v1.18

 ## Windows

-We have prebuilt releases of d2 available for Windows via `.msi` installers. The installer
+We have prebuilt [releases](https://github.com/terrastruct/d2/releases) of d2 available for Windows via `.msi` installers. The installer
 will add the `d2` binary to your `$PATH` so that you can execute `d2` in `cmd.exe` or
 `pwsh.exe`.

--- a/docs/assets/flow.svg
+++ b/docs/assets/flow.svg
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="485" height="1908" viewBox="-100 -100 485 1908"><style type="text/css">
--- a/docs/examples/chess/dia.svg
+++ b/docs/examples/chess/dia.svg
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="741" height="1330" viewBox="-100 -100 741 1330"><style type="text/css">
--- a/docs/examples/lib/1-d2lib/d2lib.go
+++ b/docs/examples/lib/1-d2lib/d2lib.go
@ -5,6 +5,7 @@ import (
 	"io/ioutil"
 	"path/filepath"

+	"oss.terrastruct.com/d2/d2graph"
 	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
 	"oss.terrastruct.com/d2/d2lib"
 	"oss.terrastruct.com/d2/d2renderers/d2svg"
@ -15,8 +16,11 @@ import (
 // Remember to add if err != nil checks in production.
 func main() {
 	ruler, _ := textmeasure.NewRuler()
+	defaultLayout := func(ctx context.Context, g *d2graph.Graph) error {
+		return d2dagrelayout.Layout(ctx, g, nil)
+	}
 	diagram, _, _ := d2lib.Compile(context.Background(), "x -> y", &d2lib.CompileOptions{
-		Layout:  d2dagrelayout.Layout,
+		Layout:  defaultLayout,
 		Ruler:   ruler,
 		ThemeID: d2themescatalog.GrapeSoda.ID,
 	})
--- a/docs/examples/lib/2-d2oracle/d2oracle.go
+++ b/docs/examples/lib/2-d2oracle/d2oracle.go
@ -17,7 +17,7 @@ func main() {
 	// From one.go
 	ruler, _ := textmeasure.NewRuler()
 	_, graph, _ := d2lib.Compile(context.Background(), "x -> y", &d2lib.CompileOptions{
-		Layout:  d2dagrelayout.Layout,
+		Layout:  d2dagrelayout.DefaultLayout,
 		Ruler:   ruler,
 		ThemeID: d2themescatalog.GrapeSoda.ID,
 	})
--- a/docs/examples/lib/3-lowlevel/lowlevel.go
+++ b/docs/examples/lib/3-lowlevel/lowlevel.go
@ -19,7 +19,7 @@ func main() {
 	graph, _ := d2compiler.Compile("", strings.NewReader("x -> y"), nil)
 	ruler, _ := textmeasure.NewRuler()
 	_ = graph.SetDimensions(nil, ruler, nil)
-	_ = d2dagrelayout.Layout(context.Background(), graph)
+	_ = d2dagrelayout.Layout(context.Background(), graph, nil)
 	diagram, _ := d2exporter.Export(context.Background(), graph, d2themescatalog.NeutralDefault.ID, nil)
 	out, _ := d2svg.Render(diagram, &d2svg.RenderOpts{
 		Pad: d2svg.DEFAULT_PADDING,
--- a/e2etests/e2e_test.go
+++ b/e2etests/e2e_test.go
@ -130,9 +130,9 @@ func run(t *testing.T, tc testCase) {
 	for _, layoutName := range layoutsTested {
 		var layout func(context.Context, *d2graph.Graph) error
 		if layoutName == "dagre" {
-			layout = d2dagrelayout.Layout
+			layout = d2dagrelayout.DefaultLayout
 		} else if layoutName == "elk" {
-			layout = d2elklayout.Layout
+			layout = d2elklayout.DefaultLayout
 		}
 		diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
 			Ruler:   ruler,
--- a/e2etests/stable_test.go
+++ b/e2etests/stable_test.go
@ -1724,6 +1724,46 @@ code.height: 512
 package.height: 512
 `,
 		},
+		{
+			name: "crow_foot_arrowhead",
+			script: `
+a <-> b: {
+	style.stroke-width: 3
+	style.stroke: "#20222a"
+	source-arrowhead: {
+		shape: cf-many
+	}
+	target-arrowhead: {
+		shape: cf-many
+	}
+}
+c <--> d <-> f: {
+	style.stroke-width: 1
+	style.stroke: "orange"
+	source-arrowhead: {
+		shape: cf-many-required
+	}
+	target-arrowhead: {
+		shape: cf-many-required
+	}
+}
+g <--> h: {
+	source-arrowhead: {
+		shape: cf-one
+	}
+	target-arrowhead: {
+		shape: cf-one
+	}
+}
+e <--> f: {
+	source-arrowhead: {
+		shape: cf-one-required
+	}
+	target-arrowhead: {
+		shape: cf-one-required
+	}
+}`,
+		},
 	}

 	runa(t, tcs)
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="2348" height="437" viewBox="-100 -100 2348 437"><style type="text/css">
+width="2352" height="441" viewBox="-102 -102 2352 441"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="2348" height="437" viewBox="-100 -100 2348 437"><style type="text/css">
 }

 ]]>
-</style><g id="build_workflow"><g class="shape" ><rect x="0" y="0" width="2148" height="237" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1074.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105" y="50" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="644" y="50" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="778.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1122" y="50" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1187.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1462" y="50" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1571.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1889" y="50" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1966.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 437.500000 118.500000 C 518.300000 118.500000 559.900000 118.500000 639.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="540.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 915.500000 118.500000 C 996.300000 118.500000 1037.900000 118.500000 1117.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1018.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1257.500000 118.500000 C 1336.300000 118.500000 1377.900000 118.500000 1457.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1357.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1682.500000 118.500000 C 1763.300000 118.500000 1804.900000 118.500000 1884.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1784.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="2571260716" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2348" height="437">
-<rect x="-100" y="-100" width="2348" height="437" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="build_workflow"><g class="shape" ><rect x="0" y="0" width="2148" height="237" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1074.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105" y="50" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="644" y="50" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="778.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1122" y="50" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1187.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1462" y="50" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1571.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1889" y="50" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1966.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 437.500000 118.500000 C 518.300000 118.500000 559.900000 118.500000 639.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="540.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 915.500000 118.500000 C 996.300000 118.500000 1037.900000 118.500000 1117.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1018.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1257.500000 118.500000 C 1336.300000 118.500000 1377.900000 118.500000 1457.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1357.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1682.500000 118.500000 C 1763.300000 118.500000 1804.900000 118.500000 1884.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1784.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="2571260716" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2352" height="441">
+<rect x="-100" y="-100" width="2352" height="441" fill="white"></rect>
 <rect x="513.000000" y="108.000000" width="54" height="21" fill="black"></rect>
 <rect x="949.000000" y="108.000000" width="138" height="21" fill="black"></rect>
 <rect x="1298.000000" y="108.000000" width="119" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="2093" height="487" viewBox="-88 -88 2093 487"><style type="text/css">
+width="2097" height="491" viewBox="-90 -90 2097 491"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="2093" height="487" viewBox="-88 -88 2093 487"><style type="text/css">
 }

 ]]>
-</style><g id="build_workflow"><g class="shape" ><rect x="12" y="12" width="1893" height="287" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="958.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="87" y="87" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="511" y="87" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="645.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="958" y="87" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1023.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1248" y="87" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1357.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1675" y="87" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1752.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 419.000000 155.500000 L 507.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="464.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 782.000000 155.500000 L 954.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="869.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1093.000000 155.500000 L 1244.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1168.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1468.000000 155.500000 L 1671.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1570.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="1960525210" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2093" height="487">
-<rect x="-100" y="-100" width="2093" height="487" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="build_workflow"><g class="shape" ><rect x="12" y="12" width="1893" height="287" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="958.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="87" y="87" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="511" y="87" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="645.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="958" y="87" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1023.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1248" y="87" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1357.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1675" y="87" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1752.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 419.000000 155.500000 L 507.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="464.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 782.000000 155.500000 L 954.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="869.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1093.000000 155.500000 L 1244.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1168.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1468.000000 155.500000 L 1671.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1570.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="1960525210" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2097" height="491">
+<rect x="-100" y="-100" width="2097" height="491" fill="white"></rect>
 <rect x="437.000000" y="145.000000" width="54" height="21" fill="black"></rect>
 <rect x="800.000000" y="145.000000" width="138" height="21" fill="black"></rect>
 <rect x="1109.000000" y="145.000000" width="119" height="21" fill="black"></rect>
--- a/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1427" height="568" viewBox="-100 -100 1427 568"><style type="text/css">
+width="1431" height="572" viewBox="-102 -102 1431 572"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="1427" height="568" viewBox="-100 -100 1427 568"><style type="text/css">
 }

 ]]>
-</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0" y="0" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="75.500000" dy="0.000000">ninety</tspan><tspan x="75.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="211" y="8" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="422" y="0" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="503.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="503.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="503.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="644" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="721.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="864" y="242" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.500000" y="308.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="858" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="1072" y="8" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1149.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 721.000000 136.000000 C 721.000000 180.400000 749.500000 207.049065 859.962840 265.377574" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 935.000000 136.000000 C 935.000000 180.400000 935.000000 202.000000 935.000000 238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 1149.500000 136.000000 C 1149.500000 180.400000 1120.900000 207.000000 1010.042356 265.142121" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><mask id="4049001157" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1427" height="568">
-<rect x="-100" y="-100" width="1427" height="568" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0" y="0" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="75.500000" dy="0.000000">ninety</tspan><tspan x="75.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="211" y="8" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="422" y="0" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="503.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="503.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="503.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="644" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="721.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="864" y="242" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.500000" y="308.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="858" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="1072" y="8" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1149.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 721.000000 136.000000 C 721.000000 180.400000 749.500000 207.049065 859.962840 265.377574" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 935.000000 136.000000 C 935.000000 180.400000 935.000000 202.000000 935.000000 238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 1149.500000 136.000000 C 1149.500000 180.400000 1120.900000 207.000000 1010.042356 265.142121" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><mask id="4049001157" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1431" height="572">
+<rect x="-100" y="-100" width="1431" height="572" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1227" height="568" viewBox="-88 -88 1227 568"><style type="text/css">
+width="1231" height="572" viewBox="-90 -90 1231 572"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="1227" height="568" viewBox="-88 -88 1227 568"><style type="text/css">
 }

 ]]>
-</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="87.500000" dy="0.000000">ninety</tspan><tspan x="87.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="183" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="258.500000" y="86.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="354" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="435.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="435.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="536" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="613.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="715" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="786.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="710" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="787.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="884" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="961.500000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 613.000000 156.000000 L 613.000000 194.000000 S 613.000000 204.000000 623.000000 204.000000 L 741.250000 204.000000 S 751.250000 204.000000 751.250000 214.000000 L 751.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 787.000000 156.000000 L 787.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 961.500000 156.000000 L 961.500000 194.000000 S 961.500000 204.000000 951.500000 204.000000 L 832.750000 204.000000 S 822.750000 204.000000 822.750000 214.000000 L 822.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><mask id="3106414556" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1227" height="568">
-<rect x="-100" y="-100" width="1227" height="568" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="87.500000" dy="0.000000">ninety</tspan><tspan x="87.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="183" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="258.500000" y="86.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="354" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="435.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="435.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="536" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="613.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="715" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="786.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="710" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="787.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="884" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="961.500000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 613.000000 156.000000 L 613.000000 194.000000 S 613.000000 204.000000 623.000000 204.000000 L 741.250000 204.000000 S 751.250000 204.000000 751.250000 214.000000 L 751.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 787.000000 156.000000 L 787.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 961.500000 156.000000 L 961.500000 194.000000 S 961.500000 204.000000 951.500000 204.000000 L 832.750000 204.000000 S 822.750000 204.000000 822.750000 214.000000 L 822.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><mask id="3106414556" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1231" height="572">
+<rect x="-100" y="-100" width="1231" height="572" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
--- a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="488" height="328" viewBox="-100 -100 488 328"><style type="text/css">
+width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,7 +19,27 @@ width="488" height="328" viewBox="-100 -100 488 328"><style type="text/css">
 }

 ]]>
-</style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188" y="14" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="1654899612" maskUnits="userSpaceOnUse" x="-100" y="-100" width="488" height="328">
-<rect x="-100" y="-100" width="488" height="328" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188" y="14" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="1654899612" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="332">
+<rect x="-100" y="-100" width="492" height="332" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="448" height="328" viewBox="-88 -88 448 328"><style type="text/css">
+width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,7 +19,27 @@ width="448" height="328" viewBox="-88 -88 448 328"><style type="text/css">
 }

 ]]>
-</style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160" y="26" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="124328945" maskUnits="userSpaceOnUse" x="-100" y="-100" width="448" height="328">
-<rect x="-100" y="-100" width="448" height="328" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160" y="26" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="124328945" maskUnits="userSpaceOnUse" x="-100" y="-100" width="452" height="332">
+<rect x="-100" y="-100" width="452" height="332" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1536" height="574" viewBox="-100 -100 1536 574"><style type="text/css">
+width="1540" height="578" viewBox="-102 -102 1540 578"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,7 +19,27 @@ width="1536" height="574" viewBox="-100 -100 1536 574"><style type="text/css">
 }

 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><style type="text/css">.md em,
 .md dfn {
  font-family: "font-italic";
 }
@ -780,8 +801,8 @@ width="1536" height="574" viewBox="-100 -100 1536 574"><style type="text/css">
 </div></foreignObject></g></g><g id="m5_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="994.000000" y="12.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Last message</p>
 </div></foreignObject></g></g><g id="m6_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="1154.000000" y="0.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Next message will be<br />
 inserted here</p>
-</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="50" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="235" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="297.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="420" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="482.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="605" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="667.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="790" y="198" width="126" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="853.000000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="976" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1038.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="1161" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1223.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 112.500000 38.000000 C 112.500000 85.600000 112.500000 158.000000 112.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 482.500000 38.000000 C 482.500000 85.600000 482.500000 158.000000 482.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 1038.500000 38.000000 C 1038.500000 85.600000 1038.500000 158.000000 1038.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 1223.500000 50.000000 C 1223.500000 88.000000 1223.500000 158.000000 1223.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><mask id="1305977298" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1536" height="574">
-<rect x="-100" y="-100" width="1536" height="574" fill="white"></rect>
+</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="50" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="235" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="297.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="420" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="482.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="605" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="667.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="790" y="198" width="126" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="853.000000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="976" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1038.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="1161" y="198" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1223.500000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 112.500000 38.000000 C 112.500000 85.600000 112.500000 158.000000 112.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 482.500000 38.000000 C 482.500000 85.600000 482.500000 158.000000 482.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 1038.500000 38.000000 C 1038.500000 85.600000 1038.500000 158.000000 1038.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 1223.500000 50.000000 C 1223.500000 88.000000 1223.500000 158.000000 1223.500000 194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1305977298)"/></g><mask id="1305977298" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1540" height="578">
+<rect x="-100" y="-100" width="1540" height="578" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1346" height="629" viewBox="-88 -88 1346 629"><style type="text/css">
+width="1350" height="633" viewBox="-90 -90 1350 633"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,7 +19,27 @@ width="1346" height="629" viewBox="-88 -88 1346 629"><style type="text/css">
 }

 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><style type="text/css">.md em,
 .md dfn {
  font-family: "font-italic";
 }
@ -780,8 +801,8 @@ width="1346" height="629" viewBox="-88 -88 1346 629"><style type="text/css">
 </div></foreignObject></g></g><g id="m5_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="830.000000" y="36.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Last message</p>
 </div></foreignObject></g></g><g id="m6_desc"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="950.000000" y="12.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p>Next message will be<br />
 inserted here</p>
-</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="87" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="149.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="232" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="377" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="522" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="584.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="667" y="240" width="126" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="730.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="813" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="875.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="958" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1020.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 149.500000 62.000000 L 149.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 439.500000 62.000000 L 439.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 875.500000 62.000000 L 875.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 1020.500000 62.000000 L 1020.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><mask id="71928444" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1346" height="629">
-<rect x="-100" y="-100" width="1346" height="629" fill="white"></rect>
+</div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="87" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="149.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="232" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="377" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="522" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="584.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="667" y="240" width="126" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="730.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="813" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="875.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="958" y="240" width="125" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1020.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 149.500000 62.000000 L 149.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 439.500000 62.000000 L 439.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 875.500000 62.000000 L 875.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 1020.500000 62.000000 L 1020.500000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#71928444)"/></g><mask id="71928444" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1350" height="633">
+<rect x="-100" y="-100" width="1350" height="633" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="366" height="552" viewBox="-100 -100 366 552"><style type="text/css">
@ -18,7 +19,27 @@ width="366" height="552" viewBox="-100 -100 366 552"><style type="text/css">
 }

 ]]>
-</style><g id="A"><g class="shape" ><rect x="13" y="0" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="0" y="226" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 83.000000 127.000000 C 83.000000 166.000000 83.000000 186.000000 83.000000 223.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3774985050)"/></g><mask id="3774985050" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="A"><g class="shape" ><rect x="13" y="0" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="0" y="226" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 83.000000 127.000000 C 83.000000 166.000000 83.000000 186.000000 83.000000 223.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3774985050)"/></g><mask id="3774985050" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
 <rect x="-100" y="-100" width="366" height="552" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="366" height="552" viewBox="-88 -88 366 552"><style type="text/css">
@ -18,7 +19,27 @@ width="366" height="552" viewBox="-88 -88 366 552"><style type="text/css">
 }

 ]]>
-</style><g id="A"><g class="shape" ><rect x="25" y="12" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="238" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 95.000000 139.000000 L 95.000000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1550694221)"/></g><mask id="1550694221" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="A"><g class="shape" ><rect x="25" y="12" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="238" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 95.000000 139.000000 L 95.000000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1550694221)"/></g><mask id="1550694221" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
 <rect x="-100" y="-100" width="366" height="552" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1282" height="544" viewBox="-100 -100 1282 544"><style type="text/css">
+width="1286" height="548" viewBox="-102 -102 1286 548"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,10 +19,30 @@ width="1282" height="544" viewBox="-100 -100 1282 544"><style type="text/css">
 }

 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="27.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="36.000000" x2="1082.000000" y2="36.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="341" y="136" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="136.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="163.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="341" y="272" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="272.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="299.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="351.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="27.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="36.000000" x2="1082.000000" y2="36.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="341" y="136" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="136.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="163.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="341" y="272" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="272.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="299.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="351.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
 <text class="text" x="392.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="722.000000" y="331.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="341.000000" y1="344.000000" x2="742.000000" y2="344.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 541.000000 38.000000 C 541.000000 76.000000 541.000000 96.000000 541.000000 132.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 174.000000 C 541.000000 212.000000 541.000000 232.000000 541.000000 268.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><mask id="4293455829" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1282" height="544">
-<rect x="-100" y="-100" width="1282" height="544" fill="white"></rect>
+<text class="text" x="722.000000" y="331.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="341.000000" y1="344.000000" x2="742.000000" y2="344.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 541.000000 38.000000 C 541.000000 76.000000 541.000000 96.000000 541.000000 132.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 174.000000 C 541.000000 212.000000 541.000000 232.000000 541.000000 268.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><mask id="4293455829" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
+<rect x="-100" y="-100" width="1286" height="548" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1282" height="544" viewBox="-88 -88 1282 544"><style type="text/css">
+width="1286" height="548" viewBox="-90 -90 1286 548"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,10 +19,30 @@ width="1282" height="544" viewBox="-88 -88 1282 544"><style type="text/css">
 }

 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="39.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="48.000000" x2="1094.000000" y2="48.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="352" y="148" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="148.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="175.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="352" y="284" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="284.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="311.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="362.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="39.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="48.000000" x2="1094.000000" y2="48.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="352" y="148" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="148.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="175.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="352" y="284" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="284.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="311.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="362.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
 <text class="text" x="403.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
-<text class="text" x="733.000000" y="343.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="352.000000" y1="356.000000" x2="753.000000" y2="356.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 553.000000 50.000000 L 553.000000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 186.000000 L 553.000000 280.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><mask id="2684059959" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1282" height="544">
-<rect x="-100" y="-100" width="1282" height="544" fill="white"></rect>
+<text class="text" x="733.000000" y="343.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="352.000000" y1="356.000000" x2="753.000000" y2="356.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 553.000000 50.000000 L 553.000000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 186.000000 L 553.000000 280.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><mask id="2684059959" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
+<rect x="-100" y="-100" width="1286" height="548" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="390" height="352" viewBox="-100 -100 390 352"><style type="text/css">
+width="394" height="356" viewBox="-102 -102 394 356"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="390" height="352" viewBox="-100 -100 390 352"><style type="text/css">
 }

 ]]>
-</style><g id="my network"><g class="shape" ><rect x="0" y="0" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="63.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="95.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="3050687478" maskUnits="userSpaceOnUse" x="-100" y="-100" width="390" height="352">
-<rect x="-100" y="-100" width="390" height="352" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="my network"><g class="shape" ><rect x="0" y="0" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="63.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="95.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="3050687478" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
+<rect x="-100" y="-100" width="394" height="356" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="390" height="352" viewBox="-88 -88 390 352"><style type="text/css">
+width="394" height="356" viewBox="-90 -90 394 356"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="390" height="352" viewBox="-88 -88 390 352"><style type="text/css">
 }

 ]]>
-</style><g id="my network"><g class="shape" ><rect x="12" y="12" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="75.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="107.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="2671818094" maskUnits="userSpaceOnUse" x="-100" y="-100" width="390" height="352">
-<rect x="-100" y="-100" width="390" height="352" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="my network"><g class="shape" ><rect x="12" y="12" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="75.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="107.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="2671818094" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
+<rect x="-100" y="-100" width="394" height="356" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="648" height="1340" viewBox="-100 -100 648 1340"><style type="text/css">
@ -18,7 +19,27 @@ width="648" height="1340" viewBox="-100 -100 648 1340"><style type="text/css">
 }

 ]]>
-</style><g id="foo"><g class="shape" ><rect x="0" y="0" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="0" y="620" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="653.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="274" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="274" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 224.000000 521.000000 C 224.000000 560.000000 224.000000 580.000000 224.000000 617.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="(foo.a -- )[0]"><path d="M 99.000000 238.000000 L 99.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foo.b -- )[0]"><path d="M 349.000000 238.000000 L 349.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.c -- )[0]"><path d="M 99.000000 858.000000 L 99.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.d -- )[0]"><path d="M 349.000000 858.000000 L 349.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 101.000000 366.000000 L 345.000000 366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 101.000000 986.000000 L 345.000000 986.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><mask id="625948739" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="foo"><g class="shape" ><rect x="0" y="0" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="0" y="620" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="653.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="274" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="274" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 224.000000 521.000000 C 224.000000 560.000000 224.000000 580.000000 224.000000 617.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="(foo.a -- )[0]"><path d="M 99.000000 238.000000 L 99.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foo.b -- )[0]"><path d="M 349.000000 238.000000 L 349.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.c -- )[0]"><path d="M 99.000000 858.000000 L 99.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.d -- )[0]"><path d="M 349.000000 858.000000 L 349.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 101.000000 366.000000 L 345.000000 366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 101.000000 986.000000 L 345.000000 986.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><mask id="625948739" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
 <rect x="-100" y="-100" width="648" height="1340" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="648" height="1340" viewBox="-88 -88 648 1340"><style type="text/css">
@ -18,7 +19,27 @@ width="648" height="1340" viewBox="-88 -88 648 1340"><style type="text/css">
 }

 ]]>
-</style><g id="foo"><g class="shape" ><rect x="12" y="12" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="12" y="632" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="665.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="36" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="286" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="36" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="286" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 236.000000 533.000000 L 236.000000 629.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="(foo.a -- )[0]"><path d="M 111.000000 250.000000 L 111.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foo.b -- )[0]"><path d="M 361.000000 250.000000 L 361.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.c -- )[0]"><path d="M 111.000000 870.000000 L 111.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.d -- )[0]"><path d="M 361.000000 870.000000 L 361.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 113.000000 378.000000 L 357.000000 378.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 113.000000 998.000000 L 357.000000 998.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><mask id="3235423664" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="foo"><g class="shape" ><rect x="12" y="12" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="12" y="632" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="665.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="36" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="286" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="36" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="286" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 236.000000 533.000000 L 236.000000 629.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="(foo.a -- )[0]"><path d="M 111.000000 250.000000 L 111.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foo.b -- )[0]"><path d="M 361.000000 250.000000 L 361.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.c -- )[0]"><path d="M 111.000000 870.000000 L 111.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.d -- )[0]"><path d="M 361.000000 870.000000 L 361.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 113.000000 378.000000 L 357.000000 378.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 113.000000 998.000000 L 357.000000 998.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><mask id="3235423664" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
 <rect x="-100" y="-100" width="648" height="1340" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="600" height="456" viewBox="-76 -26 600 456"><style type="text/css">
+width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="600" height="456" viewBox="-76 -26 600 456"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="600" height="456">
-<rect x="-100" y="-100" width="600" height="456" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
+<rect x="-100" y="-100" width="604" height="458" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="600" height="456" viewBox="-76 -26 600 456"><style type="text/css">
+width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="600" height="456" viewBox="-76 -26 600 456"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="600" height="456">
-<rect x="-100" y="-100" width="600" height="456" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
+<rect x="-100" y="-100" width="604" height="458" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="375" height="796" viewBox="-76 -26 375 796"><style type="text/css">
+width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="375" height="796" viewBox="-76 -26 375 796"><style type="text/css">
 }

 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="375" height="796">
-<rect x="-100" y="-100" width="375" height="796" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
+<rect x="-100" y="-100" width="377" height="798" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="375" height="796" viewBox="-76 -26 375 796"><style type="text/css">
+width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="375" height="796" viewBox="-76 -26 375 796"><style type="text/css">
 }

 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="375" height="796">
-<rect x="-100" y="-100" width="375" height="796" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
+<rect x="-100" y="-100" width="377" height="798" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1388" height="308" viewBox="-100 -100 1388 308"><style type="text/css">
+width="1392" height="312" viewBox="-102 -102 1392 312"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,7 +19,27 @@ width="1388" height="308" viewBox="-100 -100 1388 308"><style type="text/css">
 }

 ]]>
-</style><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="272.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="514.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="534.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="272.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
@ -26,8 +47,8 @@ width="1388" height="308" viewBox="-100 -100 1388 308"><style type="text/css">
 <text class="text" x="866.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="1168.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="594.000000" y1="72.000000" x2="1188.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="604.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="866.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
-<text class="text" x="1168.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="594.000000" y1="108.000000" x2="1188.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="3570027740" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1388" height="308">
-<rect x="-100" y="-100" width="1388" height="308" fill="white"></rect>
+<text class="text" x="1168.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="594.000000" y1="108.000000" x2="1188.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="3570027740" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1392" height="312">
+<rect x="-100" y="-100" width="1392" height="312" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1348" height="308" viewBox="-88 -88 1348 308"><style type="text/css">
+width="1352" height="312" viewBox="-90 -90 1352 312"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,7 +19,27 @@ width="1348" height="308" viewBox="-88 -88 1348 308"><style type="text/css">
 }

 ]]>
-</style><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="284.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="526.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="546.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="284.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
@ -26,8 +47,8 @@ width="1348" height="308" viewBox="-88 -88 1348 308"><style type="text/css">
 <text class="text" x="838.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="1140.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="566.000000" y1="84.000000" x2="1160.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="576.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="838.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
-<text class="text" x="1140.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="566.000000" y1="120.000000" x2="1160.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="1110839858" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1348" height="308">
-<rect x="-100" y="-100" width="1348" height="308" fill="white"></rect>
+<text class="text" x="1140.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="566.000000" y1="120.000000" x2="1160.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="1110839858" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1352" height="312">
+<rect x="-100" y="-100" width="1352" height="312" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="622" height="1024" viewBox="-100 -100 622 1024"><style type="text/css">
+width="626" height="1028" viewBox="-102 -102 626 1028"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,7 +19,27 @@ width="622" height="1024" viewBox="-100 -100 622 1024"><style type="text/css">
 }

 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="402.000000" y="120.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="10.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
@ -42,8 +63,8 @@ width="622" height="1024" viewBox="-100 -100 622 1024"><style type="text/css">
 <text class="text" x="218.000000" y="643.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
 <text class="text" x="295.000000" y="643.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="107.000000" y1="654.000000" x2="315.000000" y2="654.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(113.000000 754.000000)" style="opacity:1.000000"><rect class="shape" width="196" height="70" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" font-weight="bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" font-weight="bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" font-weight="bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
-</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" font-weight="bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 211.000000 370.000000 C 211.000000 408.000000 211.000000 428.000000 211.000000 464.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#523458208)"/></g><g id="(users -&gt; code)[0]"><path d="M 211.000000 656.000000 C 211.000000 694.000000 211.000000 714.000000 211.000000 750.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#523458208)"/></g><mask id="523458208" maskUnits="userSpaceOnUse" x="-100" y="-100" width="622" height="1024">
-<rect x="-100" y="-100" width="622" height="1024" fill="white"></rect>
+</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" font-weight="bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 211.000000 370.000000 C 211.000000 408.000000 211.000000 428.000000 211.000000 464.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#523458208)"/></g><g id="(users -&gt; code)[0]"><path d="M 211.000000 656.000000 C 211.000000 694.000000 211.000000 714.000000 211.000000 750.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#523458208)"/></g><mask id="523458208" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="1028">
+<rect x="-100" y="-100" width="626" height="1028" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="622" height="1024" viewBox="-88 -88 622 1024"><style type="text/css">
+width="626" height="1028" viewBox="-90 -90 626 1028"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,7 +19,27 @@ width="622" height="1024" viewBox="-88 -88 622 1024"><style type="text/css">
 }

 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="414.000000" y="132.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="22.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
@ -42,8 +63,8 @@ width="622" height="1024" viewBox="-88 -88 622 1024"><style type="text/css">
 <text class="text" x="230.000000" y="655.500000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
 <text class="text" x="307.000000" y="655.500000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="119.000000" y1="666.000000" x2="327.000000" y2="666.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(125.000000 766.000000)" style="opacity:1.000000"><rect class="shape" width="196" height="70" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" font-weight="bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" font-weight="bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" font-weight="bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
-</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" font-weight="bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 223.000000 382.000000 L 223.000000 476.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2661949018)"/></g><g id="(users -&gt; code)[0]"><path d="M 223.000000 668.000000 L 223.000000 762.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2661949018)"/></g><mask id="2661949018" maskUnits="userSpaceOnUse" x="-100" y="-100" width="622" height="1024">
-<rect x="-100" y="-100" width="622" height="1024" fill="white"></rect>
+</text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" font-weight="bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 223.000000 382.000000 L 223.000000 476.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2661949018)"/></g><g id="(users -&gt; code)[0]"><path d="M 223.000000 668.000000 L 223.000000 762.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2661949018)"/></g><mask id="2661949018" maskUnits="userSpaceOnUse" x="-100" y="-100" width="626" height="1028">
+<rect x="-100" y="-100" width="626" height="1028" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="486" height="552" viewBox="-100 -100 486 552"><style type="text/css">
+width="490" height="556" viewBox="-102 -102 490 556"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="486" height="552" viewBox="-100 -100 486 552"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="87" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="173" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 93.558654 127.588117 C 64.154867 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><g id="(a -&gt; c)[0]"><path d="M 192.441346 127.588117 C 221.845133 166.000000 229.500000 186.000000 229.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><mask id="1704832080" maskUnits="userSpaceOnUse" x="-100" y="-100" width="486" height="552">
-<rect x="-100" y="-100" width="486" height="552" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="87" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="173" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 93.558654 127.588117 C 64.154867 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><g id="(a -&gt; c)[0]"><path d="M 192.441346 127.588117 C 221.845133 166.000000 229.500000 186.000000 229.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><mask id="1704832080" maskUnits="userSpaceOnUse" x="-100" y="-100" width="490" height="556">
+<rect x="-100" y="-100" width="490" height="556" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="446" height="552" viewBox="-88 -88 446 552"><style type="text/css">
+width="450" height="556" viewBox="-90 -90 450 556"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="446" height="552" viewBox="-88 -88 446 552"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="30" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><mask id="1488396738" maskUnits="userSpaceOnUse" x="-100" y="-100" width="446" height="552">
-<rect x="-100" y="-100" width="446" height="552" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="30" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><mask id="1488396738" maskUnits="userSpaceOnUse" x="-100" y="-100" width="450" height="556">
+<rect x="-100" y="-100" width="450" height="556" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
+width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2910090598)"/></g><mask id="2910090598" maskUnits="userSpaceOnUse" x="-100" y="-100" width="313" height="552">
-<rect x="-100" y="-100" width="313" height="552" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2910090598)"/></g><mask id="2910090598" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
+<rect x="-100" y="-100" width="317" height="556" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="313" height="552" viewBox="-88 -88 313 552"><style type="text/css">
+width="317" height="556" viewBox="-90 -90 317 556"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="313" height="552" viewBox="-88 -88 313 552"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#26378777)"/></g><mask id="26378777" maskUnits="userSpaceOnUse" x="-100" y="-100" width="313" height="552">
-<rect x="-100" y="-100" width="313" height="552" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#26378777)"/></g><mask id="26378777" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
+<rect x="-100" y="-100" width="317" height="556" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="414" height="752" viewBox="-100 -100 414 752"><style type="text/css">
+width="418" height="756" viewBox="-102 -102 418 756"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="414" height="752" viewBox="-100 -100 414 752"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="1" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="51" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="50" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 178.000000 C 107.000000 216.000000 107.000000 236.000000 107.000000 251.000000 C 107.000000 266.000000 107.000000 336.000000 107.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2635509857)"/></g><mask id="2635509857" maskUnits="userSpaceOnUse" x="-100" y="-100" width="414" height="752">
-<rect x="-100" y="-100" width="414" height="752" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="1" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="51" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="50" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 178.000000 C 107.000000 216.000000 107.000000 236.000000 107.000000 251.000000 C 107.000000 266.000000 107.000000 336.000000 107.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2635509857)"/></g><mask id="2635509857" maskUnits="userSpaceOnUse" x="-100" y="-100" width="418" height="756">
+<rect x="-100" y="-100" width="418" height="756" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="464" height="862" viewBox="-88 -88 464 862"><style type="text/css">
+width="468" height="866" viewBox="-90 -90 468 866"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="464" height="862" viewBox="-88 -88 464 862"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="143.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3058194229)"/></g><mask id="3058194229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="464" height="862">
-<rect x="-100" y="-100" width="464" height="862" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="143.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3058194229)"/></g><mask id="3058194229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="468" height="866">
+<rect x="-100" y="-100" width="468" height="866" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
+width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#894944389)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="894944389" maskUnits="userSpaceOnUse" x="-100" y="-100" width="313" height="552">
-<rect x="-100" y="-100" width="313" height="552" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#894944389)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="894944389" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
+<rect x="-100" y="-100" width="317" height="556" fill="white"></rect>
 <rect x="40.000000" y="166.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="313" height="673" viewBox="-88 -88 313 673"><style type="text/css">
+width="317" height="677" viewBox="-90 -90 317 677"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="313" height="673" viewBox="-88 -88 313 673"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#501621412)"/><text class="text-italic" x="68.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="501621412" maskUnits="userSpaceOnUse" x="-100" y="-100" width="313" height="673">
-<rect x="-100" y="-100" width="313" height="673" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#501621412)"/><text class="text-italic" x="68.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="501621412" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="677">
+<rect x="-100" y="-100" width="317" height="677" fill="white"></rect>
 <rect x="52.000000" y="238.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
@ -18,7 +19,27 @@ width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
 }

 ]]>
-</style><mask id="121760133" maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><mask id="121760133" maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200">
 <rect x="-100" y="-100" width="200" height="200" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
@ -18,7 +19,27 @@ width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
 }

 ]]>
-</style><mask id="121760133" maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><mask id="121760133" maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200">
 <rect x="-100" y="-100" width="200" height="200" fill="white"></rect>

 </mask><style type="text/css"><![CDATA[]]></style></svg>
--- a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="401" height="552" viewBox="-144 -100 401 552"><style type="text/css">
+width="401" height="556" viewBox="-144 -102 401 556"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="401" height="552" viewBox="-144 -100 401 552"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#2296324013)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="218.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="2296324013" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="552">
-<rect x="-100" y="-100" width="401" height="552" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#2296324013)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="218.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="2296324013" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="556">
+<rect x="-100" y="-100" width="401" height="556" fill="white"></rect>
 <rect x="-44.000000" y="166.000000" width="201" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="401" height="673" viewBox="-88 -88 401 673"><style type="text/css">
+width="401" height="677" viewBox="-88 -90 401 677"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="401" height="673" viewBox="-88 -88 401 673"><style type="text/css">
 }

 ]]>
-</style><g id="a"><g class="shape" ><rect x="56" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="56" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 112.500000 140.000000 L 112.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#3116495848)"/><text class="text-italic" x="112.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="126.500000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="126.500000" y="351.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="3116495848" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="673">
-<rect x="-100" y="-100" width="401" height="673" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="a"><g class="shape" ><rect x="56" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="56" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 112.500000 140.000000 L 112.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#3116495848)"/><text class="text-italic" x="112.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="126.500000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="126.500000" y="351.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="3116495848" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="677">
+<rect x="-100" y="-100" width="401" height="677" fill="white"></rect>
 <rect x="12.000000" y="238.000000" width="201" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
--- a/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="634" height="652" viewBox="-100 -100 634 652"><style type="text/css">
+width="638" height="656" viewBox="-102 -102 638 656"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="634" height="652" viewBox="-100 -100 634 652"><style type="text/css">
 }

 ]]>
-</style><g id="aaa"><g class="shape" ><rect x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3990951543)"/><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 297.555754 298.965997 C 199.400000 241.000000 170.600000 216.000000 157.643805 177.893545" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#3990951543)"/><text class="text-italic" x="215.500000" y="256.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="3990951543" maskUnits="userSpaceOnUse" x="-100" y="-100" width="634" height="652">
-<rect x="-100" y="-100" width="634" height="652" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="aaa"><g class="shape" ><rect x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3990951543)"/><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 297.555754 298.965997 C 199.400000 241.000000 170.600000 216.000000 157.643805 177.893545" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#3990951543)"/><text class="text-italic" x="215.500000" y="256.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="3990951543" maskUnits="userSpaceOnUse" x="-100" y="-100" width="638" height="656">
+<rect x="-100" y="-100" width="638" height="656" fill="white"></rect>
 <rect x="105.000000" y="215.000000" width="23" height="21" fill="black"></rect>
 <rect x="203.000000" y="240.000000" width="25" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="630" height="869" viewBox="-88 -88 630 869"><style type="text/css">
+width="634" height="873" viewBox="-90 -90 634 873"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="630" height="869" viewBox="-88 -88 630 869"><style type="text/css">
 }

 ]]>
-</style><g id="aaa"><g class="shape" ><rect x="12" y="364" width="430" height="317" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="227.000000" y="397.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 85 36 C 85 12 144.85 12 151.5 12 C 158.15 12 218 12 218 36 V 114 C 218 138 158.15 138 151.5 138 C 144.85 138 85 138 85 114 V 36 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 85 36 C 85 60 144.85 60 151.5 60 C 158.15 60 218 60 218 36" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="151.500000" y="90.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 238 120.5231 L 238 12 L 368 12 L 368 120.5231 C 346.3333 97.2206 324.6667 97.2206 303 120.5231 C 281.3333 143.8256 259.6667 143.8256 238 120.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="303.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 87 439 V 520 H 153 V 565 L 183 520 H 219 V 439 H 87 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="153.000000" y="482.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="239" y="439" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="303.000000" y="505.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 303.000000 567.000000 L 303.000000 679.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="629.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 303.000000 125.000000 L 303.000000 437.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="286.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="4025362291" maskUnits="userSpaceOnUse" x="-100" y="-100" width="630" height="869">
-<rect x="-100" y="-100" width="630" height="869" fill="white"></rect>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
+]]></script><g id="aaa"><g class="shape" ><rect x="12" y="364" width="430" height="317" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="227.000000" y="397.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 85 36 C 85 12 144.85 12 151.5 12 C 158.15 12 218 12 218 36 V 114 C 218 138 158.15 138 151.5 138 C 144.85 138 85 138 85 114 V 36 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 85 36 C 85 60 144.85 60 151.5 60 C 158.15 60 218 60 218 36" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="151.500000" y="90.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 238 120.5231 L 238 12 L 368 12 L 368 120.5231 C 346.3333 97.2206 324.6667 97.2206 303 120.5231 C 281.3333 143.8256 259.6667 143.8256 238 120.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="303.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 87 439 V 520 H 153 V 565 L 183 520 H 219 V 439 H 87 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="153.000000" y="482.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="239" y="439" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="303.000000" y="505.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 303.000000 567.000000 L 303.000000 679.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="629.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 303.000000 125.000000 L 303.000000 437.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="286.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="4025362291" maskUnits="userSpaceOnUse" x="-100" y="-100" width="634" height="873">
+<rect x="-100" y="-100" width="634" height="873" fill="white"></rect>
 <rect x="292.000000" y="613.000000" width="23" height="21" fill="black"></rect>
 <rect x="291.000000" y="270.000000" width="25" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
--- a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
--- a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="724" height="626" viewBox="-100 -100 724 626"><style type="text/css">
+width="728" height="630" viewBox="-102 -102 728 630"><style type="text/css">
 <![CDATA[
 .shape {
  shape-rendering: geometricPrecision;
@ -18,8 +19,28 @@ width="724" height="626" viewBox="-100 -100 724 626"><style type="text/css">
 }

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

 </mask><style type="text/css"><![CDATA[
 .text {
--- a/Show more
+++ b/Show more