diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index c8c1b0434..392cf8339 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -12,6 +12,7 @@
- Compiler: Error on multi-line labels in `sql_table` shapes [#2057](https://github.com/terrastruct/d2/pull/2057)
- Sequence diagram: Image shape actors can use spans and notes [#2056](https://github.com/terrastruct/d2/issues/2056)
- Globs: Filters work with default values (e.g. `&opacity: 1` will capture everything without opacity explicitly set) [#2090](https://github.com/terrastruct/d2/pull/2090)
+- Render: connection label fills have a bit of padding and border-radius for better aesthetics [#2094](https://github.com/terrastruct/d2/pull/2094)
#### Bugfixes ⛑️
diff --git a/d2renderers/d2sketch/sketch_test.go b/d2renderers/d2sketch/sketch_test.go
index d0067b8d5..4f68d3843 100644
--- a/d2renderers/d2sketch/sketch_test.go
+++ b/d2renderers/d2sketch/sketch_test.go
@@ -1323,6 +1323,27 @@ C <-> D: triangle {
}
}`,
},
+ {
+ name: "connection-style-fill",
+ script: `
+shape: sequence_diagram
+customer
+employee
+rental
+item
+
+(* -> *)[*].style.fill: black
+(* -> *)[*].style.font-color: white
+
+customer -> employee: "rent(this, i, p)"
+employee -> rental: "new(this, i, p)"
+rental -> employee
+employee -> rental: isValid()
+rental -> item: isRentable(c)
+item -> customer: is(Adult)
+customer -> item: true
+`,
+ },
}
runa(t, tcs)
}
diff --git a/d2renderers/d2sketch/testdata/connection-style-fill/sketch.exp.svg b/d2renderers/d2sketch/testdata/connection-style-fill/sketch.exp.svg
new file mode 100644
index 000000000..0f3a0ed88
--- /dev/null
+++ b/d2renderers/d2sketch/testdata/connection-style-fill/sketch.exp.svg
@@ -0,0 +1,119 @@
+
\ No newline at end of file
diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 9360c3eed..039d330d5 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -623,8 +623,9 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
}
if connection.Fill != color.Empty {
rectEl := d2themes.NewThemableElement("rect")
- rectEl.X, rectEl.Y = labelTL.X, labelTL.Y
- rectEl.Width, rectEl.Height = float64(connection.LabelWidth), float64(connection.LabelHeight)
+ rectEl.Rx = 10
+ rectEl.X, rectEl.Y = labelTL.X-4, labelTL.Y-3
+ rectEl.Width, rectEl.Height = float64(connection.LabelWidth)+8, float64(connection.LabelHeight)+6
rectEl.Fill = connection.Fill
fmt.Fprint(writer, rectEl.Render())
}
diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
index b6f3f0416..69a03e133 100644
--- a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
@@ -96,7 +96,7 @@
.d2-3174230406 .color-AA4{color:#EDF0FD;}
.d2-3174230406 .color-AA5{color:#F7F8FE;}
.d2-3174230406 .color-AB4{color:#EDF0FD;}
- .d2-3174230406 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48
+ .d2-3174230406 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48
diff --git a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
index 276f85d8d..df12030cb 100644
--- a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
@@ -96,7 +96,7 @@
.d2-1981788603 .color-AA4{color:#EDF0FD;}
.d2-1981788603 .color-AA5{color:#F7F8FE;}
.d2-1981788603 .color-AB4{color:#EDF0FD;}
- .d2-1981788603 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48
+ .d2-1981788603 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48
diff --git a/e2etests/testdata/stable/nesting_power/dagre/sketch.exp.svg b/e2etests/testdata/stable/nesting_power/dagre/sketch.exp.svg
index aa2e38c0d..ec0c335c4 100644
--- a/e2etests/testdata/stable/nesting_power/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/nesting_power/dagre/sketch.exp.svg
@@ -113,7 +113,7 @@
Left Constant NearcenterdirectionsRight Constant NearseqmoreBottom Left Constant Neardefaultlayouthererectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloudrightleftisconstantandalsogridscoreritemResponseitemessayRubricconceptitemOutcomestylishcontaineradagreelktalathisisgrid12341234updownnearax
-ya_sequencea_shapesequencefinallybrow 1row 2row 3row 4row 5withasequence diagramyou canchild of is12341234scoreritemResponseitemessayRubricconceptsequencefrom one constant nearhaveanothergridhere andgrandchildscorerconceptessayRubricitemitemOutcomeitemResponse123continuenesting ororruns thisruns thisruns thisA straight edge across straight edge across nested typesdefault layoutdefault layoutdefault layout in styleto inside sequence diagramto inside sequence diagramto inside sequence diagramto constant nearfrom within constant nearto another getItem() itemgetRubric()rubricapplyTo(essayResp)match(essayResponse)score
+ya_sequencea_shapesequencefinallybrow 1row 2row 3row 4row 5withasequence diagramyou canchild of is12341234scoreritemResponseitemessayRubricconceptsequencefrom one constant nearhaveanothergridhere andgrandchildscorerconceptessayRubricitemitemOutcomeitemResponse123continuenesting ororruns thisruns thisruns thisA straight edge across straight edge across nested typesdefault layoutdefault layoutdefault layout in styleto inside sequence diagramto inside sequence diagramto inside sequence diagramto constant nearfrom within constant nearto another getItem() itemgetRubric()rubricapplyTo(essayResp)match(essayResponse)score
diff --git a/e2etests/testdata/stable/nesting_power/elk/sketch.exp.svg b/e2etests/testdata/stable/nesting_power/elk/sketch.exp.svg
index 96fb0e567..9286f9415 100644
--- a/e2etests/testdata/stable/nesting_power/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/nesting_power/elk/sketch.exp.svg
@@ -113,7 +113,7 @@
Left Constant NearcenterdirectionsRight Constant NearseqmoreBottom Left Constant Neardefaultlayouthererectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloudrightleftisconstantandalsogridscoreritemResponseitemessayRubricconceptitemOutcomestylishcontaineradagreelktalathisisgrid12341234updownnearax
-ya_sequencea_shapesequencefinallybrow 1row 2row 3row 4row 5withasequence diagramyou canchild of is12341234scoreritemResponseitemessayRubricconceptsequencefrom one constant nearhaveanothergridhere andgrandchildscorerconceptessayRubricitemitemOutcomeitemResponse123continuenesting ororruns thisruns thisruns thisA straight edge across straight edge across nested typesdefault layoutdefault layoutdefault layout in styleto inside sequence diagramto inside sequence diagramto inside sequence diagramto constant nearfrom within constant nearto another getItem() itemgetRubric()rubricapplyTo(essayResp)match(essayResponse)score
+ya_sequencea_shapesequencefinallybrow 1row 2row 3row 4row 5withasequence diagramyou canchild of is12341234scoreritemResponseitemessayRubricconceptsequencefrom one constant nearhaveanothergridhere andgrandchildscorerconceptessayRubricitemitemOutcomeitemResponse123continuenesting ororruns thisruns thisruns thisA straight edge across straight edge across nested typesdefault layoutdefault layoutdefault layout in styleto inside sequence diagramto inside sequence diagramto inside sequence diagramto constant nearfrom within constant nearto another getItem() itemgetRubric()rubricapplyTo(essayResp)match(essayResponse)score
diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
index 25f9b7b51..5f808ea6b 100644
--- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
@@ -106,7 +106,7 @@
x
-y in style
+y in style
diff --git a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
index 90f0cb5bc..ade9abddf 100644
--- a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
@@ -106,7 +106,7 @@
x
-y in style
+y in style
diff --git a/e2etests/testdata/txtar/connection-style-fill/dagre/board.exp.json b/e2etests/testdata/txtar/connection-style-fill/dagre/board.exp.json
new file mode 100644
index 000000000..013b1c18c
--- /dev/null
+++ b/e2etests/testdata/txtar/connection-style-fill/dagre/board.exp.json
@@ -0,0 +1,874 @@
+{
+ "name": "",
+ "isFolderOnly": false,
+ "fontFamily": "SourceSansPro",
+ "shapes": [
+ {
+ "id": "customer",
+ "type": "rectangle",
+ "pos": {
+ "x": 12,
+ "y": 52
+ },
+ "width": 109,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "customer",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 64,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "employee",
+ "type": "rectangle",
+ "pos": {
+ "x": 161,
+ "y": 52
+ },
+ "width": 112,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "employee",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 67,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "rental",
+ "type": "rectangle",
+ "pos": {
+ "x": 317,
+ "y": 52
+ },
+ "width": 100,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "rental",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 39,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "item",
+ "type": "rectangle",
+ "pos": {
+ "x": 467,
+ "y": 52
+ },
+ "width": 100,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "item",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 30,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "alice",
+ "type": "rectangle",
+ "pos": {
+ "x": 617,
+ "y": 52
+ },
+ "width": 100,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "alice",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 32,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "bob",
+ "type": "rectangle",
+ "pos": {
+ "x": 838,
+ "y": 52
+ },
+ "width": 100,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "bob",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 26,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ }
+ ],
+ "connections": [
+ {
+ "id": "(customer -> employee)[0]",
+ "src": "customer",
+ "srcArrow": "none",
+ "dst": "employee",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "rent(this, i, p)",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 86,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 66.5,
+ "y": 198
+ },
+ {
+ "x": 217,
+ "y": 198
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(employee -> rental)[0]",
+ "src": "employee",
+ "srcArrow": "none",
+ "dst": "rental",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "new(this, i, p)",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 87,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 217,
+ "y": 288
+ },
+ {
+ "x": 367,
+ "y": 288
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(rental -> employee)[0]",
+ "src": "rental",
+ "srcArrow": "none",
+ "dst": "employee",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 367,
+ "y": 368
+ },
+ {
+ "x": 217,
+ "y": 368
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(employee -> rental)[1]",
+ "src": "employee",
+ "srcArrow": "none",
+ "dst": "rental",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "isValid()",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 52,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 217,
+ "y": 448
+ },
+ {
+ "x": 367,
+ "y": 448
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(rental -> item)[0]",
+ "src": "rental",
+ "srcArrow": "none",
+ "dst": "item",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "isRentable(c)",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 85,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 367,
+ "y": 538
+ },
+ {
+ "x": 517,
+ "y": 538
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(item -> customer)[0]",
+ "src": "item",
+ "srcArrow": "none",
+ "dst": "customer",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "is(Adult)",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 54,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 517,
+ "y": 628
+ },
+ {
+ "x": 66.5,
+ "y": 628
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(customer -> item)[0]",
+ "src": "customer",
+ "srcArrow": "none",
+ "dst": "item",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "true",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 28,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 66.5,
+ "y": 718
+ },
+ {
+ "x": 517,
+ "y": 718
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(alice -> bob)[0]",
+ "src": "alice",
+ "srcArrow": "none",
+ "dst": "bob",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "What does it mean\nto be well-adjusted?",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 133,
+ "labelHeight": 37,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 667,
+ "y": 816
+ },
+ {
+ "x": 888,
+ "y": 816
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(bob -> alice)[0]",
+ "src": "bob",
+ "srcArrow": "none",
+ "dst": "alice",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "The ability to play bridge or\ngolf as if they were games.",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 181,
+ "labelHeight": 37,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 888,
+ "y": 922
+ },
+ {
+ "x": 667,
+ "y": 922
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(customer -- )[0]",
+ "src": "customer",
+ "srcArrow": "none",
+ "dst": "customer-lifeline-end-1038758816",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 66.5,
+ "y": 118
+ },
+ {
+ "x": 66.5,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(employee -- )[0]",
+ "src": "employee",
+ "srcArrow": "none",
+ "dst": "employee-lifeline-end-1493022808",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 217,
+ "y": 118
+ },
+ {
+ "x": 217,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(rental -- )[0]",
+ "src": "rental",
+ "srcArrow": "none",
+ "dst": "rental-lifeline-end-580282478",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 367,
+ "y": 118
+ },
+ {
+ "x": 367,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(item -- )[0]",
+ "src": "item",
+ "srcArrow": "none",
+ "dst": "item-lifeline-end-4102336625",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 517,
+ "y": 118
+ },
+ {
+ "x": 517,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(alice -- )[0]",
+ "src": "alice",
+ "srcArrow": "none",
+ "dst": "alice-lifeline-end-3851299086",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 667,
+ "y": 118
+ },
+ {
+ "x": 667,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(bob -- )[0]",
+ "src": "bob",
+ "srcArrow": "none",
+ "dst": "bob-lifeline-end-3036726343",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 888,
+ "y": 118
+ },
+ {
+ "x": 888,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ }
+ ],
+ "root": {
+ "id": "",
+ "type": "",
+ "pos": {
+ "x": 0,
+ "y": 0
+ },
+ "width": 0,
+ "height": 0,
+ "opacity": 0,
+ "strokeDash": 0,
+ "strokeWidth": 0,
+ "borderRadius": 0,
+ "fill": "N7",
+ "stroke": "",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "",
+ "fontSize": 0,
+ "fontFamily": "",
+ "language": "",
+ "color": "",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "zIndex": 0,
+ "level": 0
+ }
+}
diff --git a/e2etests/testdata/txtar/connection-style-fill/dagre/sketch.exp.svg b/e2etests/testdata/txtar/connection-style-fill/dagre/sketch.exp.svg
new file mode 100644
index 000000000..3debec50e
--- /dev/null
+++ b/e2etests/testdata/txtar/connection-style-fill/dagre/sketch.exp.svg
@@ -0,0 +1,115 @@
+
\ No newline at end of file
diff --git a/e2etests/testdata/txtar/connection-style-fill/elk/board.exp.json b/e2etests/testdata/txtar/connection-style-fill/elk/board.exp.json
new file mode 100644
index 000000000..013b1c18c
--- /dev/null
+++ b/e2etests/testdata/txtar/connection-style-fill/elk/board.exp.json
@@ -0,0 +1,874 @@
+{
+ "name": "",
+ "isFolderOnly": false,
+ "fontFamily": "SourceSansPro",
+ "shapes": [
+ {
+ "id": "customer",
+ "type": "rectangle",
+ "pos": {
+ "x": 12,
+ "y": 52
+ },
+ "width": 109,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "customer",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 64,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "employee",
+ "type": "rectangle",
+ "pos": {
+ "x": 161,
+ "y": 52
+ },
+ "width": 112,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "employee",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 67,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "rental",
+ "type": "rectangle",
+ "pos": {
+ "x": 317,
+ "y": 52
+ },
+ "width": 100,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "rental",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 39,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "item",
+ "type": "rectangle",
+ "pos": {
+ "x": 467,
+ "y": 52
+ },
+ "width": 100,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "item",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 30,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "alice",
+ "type": "rectangle",
+ "pos": {
+ "x": 617,
+ "y": 52
+ },
+ "width": 100,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "alice",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 32,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "bob",
+ "type": "rectangle",
+ "pos": {
+ "x": 838,
+ "y": 52
+ },
+ "width": 100,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "B5",
+ "stroke": "B1",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "bob",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 26,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 1
+ }
+ ],
+ "connections": [
+ {
+ "id": "(customer -> employee)[0]",
+ "src": "customer",
+ "srcArrow": "none",
+ "dst": "employee",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "rent(this, i, p)",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 86,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 66.5,
+ "y": 198
+ },
+ {
+ "x": 217,
+ "y": 198
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(employee -> rental)[0]",
+ "src": "employee",
+ "srcArrow": "none",
+ "dst": "rental",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "new(this, i, p)",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 87,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 217,
+ "y": 288
+ },
+ {
+ "x": 367,
+ "y": 288
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(rental -> employee)[0]",
+ "src": "rental",
+ "srcArrow": "none",
+ "dst": "employee",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 367,
+ "y": 368
+ },
+ {
+ "x": 217,
+ "y": 368
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(employee -> rental)[1]",
+ "src": "employee",
+ "srcArrow": "none",
+ "dst": "rental",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "isValid()",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 52,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 217,
+ "y": 448
+ },
+ {
+ "x": 367,
+ "y": 448
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(rental -> item)[0]",
+ "src": "rental",
+ "srcArrow": "none",
+ "dst": "item",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "isRentable(c)",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 85,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 367,
+ "y": 538
+ },
+ {
+ "x": 517,
+ "y": 538
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(item -> customer)[0]",
+ "src": "item",
+ "srcArrow": "none",
+ "dst": "customer",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "is(Adult)",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 54,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 517,
+ "y": 628
+ },
+ {
+ "x": 66.5,
+ "y": 628
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(customer -> item)[0]",
+ "src": "customer",
+ "srcArrow": "none",
+ "dst": "item",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "true",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 28,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 66.5,
+ "y": 718
+ },
+ {
+ "x": 517,
+ "y": 718
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(alice -> bob)[0]",
+ "src": "alice",
+ "srcArrow": "none",
+ "dst": "bob",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "What does it mean\nto be well-adjusted?",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 133,
+ "labelHeight": 37,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 667,
+ "y": 816
+ },
+ {
+ "x": 888,
+ "y": 816
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(bob -> alice)[0]",
+ "src": "bob",
+ "srcArrow": "none",
+ "dst": "alice",
+ "dstArrow": "triangle",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "B1",
+ "fill": "black",
+ "borderRadius": 10,
+ "label": "The ability to play bridge or\ngolf as if they were games.",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "white",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 181,
+ "labelHeight": 37,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 888,
+ "y": 922
+ },
+ {
+ "x": 667,
+ "y": 922
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 4
+ },
+ {
+ "id": "(customer -- )[0]",
+ "src": "customer",
+ "srcArrow": "none",
+ "dst": "customer-lifeline-end-1038758816",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 66.5,
+ "y": 118
+ },
+ {
+ "x": 66.5,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(employee -- )[0]",
+ "src": "employee",
+ "srcArrow": "none",
+ "dst": "employee-lifeline-end-1493022808",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 217,
+ "y": 118
+ },
+ {
+ "x": 217,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(rental -- )[0]",
+ "src": "rental",
+ "srcArrow": "none",
+ "dst": "rental-lifeline-end-580282478",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 367,
+ "y": 118
+ },
+ {
+ "x": 367,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(item -- )[0]",
+ "src": "item",
+ "srcArrow": "none",
+ "dst": "item-lifeline-end-4102336625",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 517,
+ "y": 118
+ },
+ {
+ "x": 517,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(alice -- )[0]",
+ "src": "alice",
+ "srcArrow": "none",
+ "dst": "alice-lifeline-end-3851299086",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 667,
+ "y": 118
+ },
+ {
+ "x": 667,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ },
+ {
+ "id": "(bob -- )[0]",
+ "src": "bob",
+ "srcArrow": "none",
+ "dst": "bob-lifeline-end-3036726343",
+ "dstArrow": "none",
+ "opacity": 1,
+ "strokeDash": 6,
+ "strokeWidth": 2,
+ "stroke": "B2",
+ "borderRadius": 10,
+ "label": "",
+ "fontSize": 16,
+ "fontFamily": "DEFAULT",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "labelPosition": "",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 888,
+ "y": 118
+ },
+ {
+ "x": 888,
+ "y": 992
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 1
+ }
+ ],
+ "root": {
+ "id": "",
+ "type": "",
+ "pos": {
+ "x": 0,
+ "y": 0
+ },
+ "width": 0,
+ "height": 0,
+ "opacity": 0,
+ "strokeDash": 0,
+ "strokeWidth": 0,
+ "borderRadius": 0,
+ "fill": "N7",
+ "stroke": "",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "",
+ "fontSize": 0,
+ "fontFamily": "",
+ "language": "",
+ "color": "",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 0,
+ "labelHeight": 0,
+ "zIndex": 0,
+ "level": 0
+ }
+}
diff --git a/e2etests/testdata/txtar/connection-style-fill/elk/sketch.exp.svg b/e2etests/testdata/txtar/connection-style-fill/elk/sketch.exp.svg
new file mode 100644
index 000000000..3debec50e
--- /dev/null
+++ b/e2etests/testdata/txtar/connection-style-fill/elk/sketch.exp.svg
@@ -0,0 +1,115 @@
+
\ No newline at end of file
diff --git a/e2etests/txtar.txt b/e2etests/txtar.txt
index 41a1a2fbe..3c2f7f028 100644
--- a/e2etests/txtar.txt
+++ b/e2etests/txtar.txt
@@ -378,3 +378,27 @@ D: "Alignment\nOf\nAlignment\nOf"{
RightAligned
Justified
}
+
+-- connection-style-fill --
+shape: sequence_diagram
+customer
+employee
+rental
+item
+
+alice
+bob
+
+(* -> *)[*].style.fill: black
+(* -> *)[*].style.font-color: white
+
+customer -> employee: "rent(this, i, p)"
+employee -> rental: "new(this, i, p)"
+rental -> employee
+employee -> rental: isValid()
+rental -> item: isRentable(c)
+item -> customer: is(Adult)
+customer -> item: true
+
+alice -> bob: What does it mean\nto be well-adjusted?
+bob -> alice: The ability to play bridge or\ngolf as if they were games.