diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index bee494318..0c8322fd9 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -1057,7 +1057,6 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
el.Y = float64(targetShape.Pos.Y - 10 + d2target.INNER_BORDER_OFFSET)
el.Width = float64(targetShape.Width - 2*d2target.INNER_BORDER_OFFSET)
el.Height = float64(targetShape.Height - 2*d2target.INNER_BORDER_OFFSET)
- // TODO inner one can be transparent
el.Fill = fill
el.Stroke = stroke
el.Style = style
@@ -1088,7 +1087,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
el.Y = float64(targetShape.Pos.Y + d2target.INNER_BORDER_OFFSET)
el.Width = float64(targetShape.Width - 2*d2target.INNER_BORDER_OFFSET)
el.Height = float64(targetShape.Height - 2*d2target.INNER_BORDER_OFFSET)
- el.Fill = fill
+ el.Fill = "transparent"
el.Stroke = stroke
el.Style = style
el.Attributes = rx
diff --git a/e2etests/patterns_test.go b/e2etests/patterns_test.go
index 998d248bb..c209e1d5c 100644
--- a/e2etests/patterns_test.go
+++ b/e2etests/patterns_test.go
@@ -98,6 +98,58 @@ queue -> package -> step
callout -> stored_data -> person
diamond -> oval -> circle
hexagon -> cloud
+`,
+ },
+ {
+ name: "real",
+ script: `
+NETWORK: {
+ style: {
+ stroke: black
+ fill-pattern: dots
+ double-border: true
+ fill: "#E7E9EE"
+ font: mono
+ }
+ CELL TOWER: {
+ style: {
+ stroke: black
+ fill-pattern: dots
+ fill: "#F5F6F9"
+ font: mono
+ }
+ satellites: SATELLITES {
+ shape: stored_data
+ style: {
+ font: mono
+ fill: white
+ stroke: black
+ multiple: true
+ }
+ }
+
+ transmitter: TRANSMITTER {
+ style: {
+ font: mono
+ fill: white
+ stroke: black
+ }
+ }
+
+ satellites -> transmitter: SEND {
+ style.stroke: black
+ style.font: mono
+ }
+ satellites -> transmitter: SEND {
+ style.stroke: black
+ style.font: mono
+ }
+ satellites -> transmitter: SEND {
+ style.stroke: black
+ style.font: mono
+ }
+ }
+}
`,
},
}
diff --git a/e2etests/testdata/patterns/real/dagre/board.exp.json b/e2etests/testdata/patterns/real/dagre/board.exp.json
new file mode 100644
index 000000000..048b9ccce
--- /dev/null
+++ b/e2etests/testdata/patterns/real/dagre/board.exp.json
@@ -0,0 +1,362 @@
+{
+ "name": "",
+ "isFolderOnly": false,
+ "fontFamily": "SourceSansPro",
+ "shapes": [
+ {
+ "id": "NETWORK",
+ "type": "rectangle",
+ "pos": {
+ "x": 0,
+ "y": 41
+ },
+ "width": 333,
+ "height": 412,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "#E7E9EE",
+ "fillPattern": "dots",
+ "stroke": "black",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": true,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "NETWORK",
+ "fontSize": 28,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 116,
+ "labelHeight": 36,
+ "labelPosition": "OUTSIDE_TOP_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "NETWORK.CELL TOWER",
+ "type": "rectangle",
+ "pos": {
+ "x": 20,
+ "y": 106
+ },
+ "width": 293,
+ "height": 317,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "#F5F6F9",
+ "fillPattern": "dots",
+ "stroke": "black",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "CELL TOWER",
+ "fontSize": 24,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 143,
+ "labelHeight": 31,
+ "labelPosition": "OUTSIDE_TOP_CENTER",
+ "zIndex": 0,
+ "level": 2
+ },
+ {
+ "id": "NETWORK.CELL TOWER.satellites",
+ "type": "stored_data",
+ "pos": {
+ "x": 86,
+ "y": 138
+ },
+ "width": 161,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "white",
+ "stroke": "black",
+ "shadow": false,
+ "3d": false,
+ "multiple": true,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "SATELLITES",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": true,
+ "underline": false,
+ "labelWidth": 96,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 3
+ },
+ {
+ "id": "NETWORK.CELL TOWER.transmitter",
+ "type": "rectangle",
+ "pos": {
+ "x": 91,
+ "y": 325
+ },
+ "width": 151,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "white",
+ "stroke": "black",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "TRANSMITTER",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": true,
+ "underline": false,
+ "labelWidth": 106,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 3
+ }
+ ],
+ "connections": [
+ {
+ "id": "NETWORK.CELL TOWER.(satellites -> transmitter)[0]",
+ "src": "NETWORK.CELL TOWER.satellites",
+ "srcArrow": "none",
+ "srcLabel": "",
+ "dst": "NETWORK.CELL TOWER.transmitter",
+ "dstArrow": "triangle",
+ "dstLabel": "",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "black",
+ "borderRadius": 10,
+ "label": "SEND",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 37,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 142,
+ "y": 205
+ },
+ {
+ "x": 106,
+ "y": 253
+ },
+ {
+ "x": 106,
+ "y": 277.2
+ },
+ {
+ "x": 142,
+ "y": 326
+ }
+ ],
+ "isCurve": true,
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 0
+ },
+ {
+ "id": "NETWORK.CELL TOWER.(satellites -> transmitter)[1]",
+ "src": "NETWORK.CELL TOWER.satellites",
+ "srcArrow": "none",
+ "srcLabel": "",
+ "dst": "NETWORK.CELL TOWER.transmitter",
+ "dstArrow": "triangle",
+ "dstLabel": "",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "black",
+ "borderRadius": 10,
+ "label": "SEND",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 37,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 166,
+ "y": 205
+ },
+ {
+ "x": 166.4,
+ "y": 253
+ },
+ {
+ "x": 166.5,
+ "y": 277.2
+ },
+ {
+ "x": 166.5,
+ "y": 326
+ }
+ ],
+ "isCurve": true,
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 0
+ },
+ {
+ "id": "NETWORK.CELL TOWER.(satellites -> transmitter)[2]",
+ "src": "NETWORK.CELL TOWER.satellites",
+ "srcArrow": "none",
+ "srcLabel": "",
+ "dst": "NETWORK.CELL TOWER.transmitter",
+ "dstArrow": "triangle",
+ "dstLabel": "",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "black",
+ "borderRadius": 10,
+ "label": "SEND",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 37,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 191,
+ "y": 205
+ },
+ {
+ "x": 227,
+ "y": 253
+ },
+ {
+ "x": 227,
+ "y": 277.2
+ },
+ {
+ "x": 191,
+ "y": 326
+ }
+ ],
+ "isCurve": true,
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 0
+ }
+ ],
+ "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/patterns/real/dagre/sketch.exp.svg b/e2etests/testdata/patterns/real/dagre/sketch.exp.svg
new file mode 100644
index 000000000..49011935b
--- /dev/null
+++ b/e2etests/testdata/patterns/real/dagre/sketch.exp.svg
@@ -0,0 +1,137 @@
+
\ No newline at end of file
diff --git a/e2etests/testdata/patterns/real/elk/board.exp.json b/e2etests/testdata/patterns/real/elk/board.exp.json
new file mode 100644
index 000000000..6e50a1b9e
--- /dev/null
+++ b/e2etests/testdata/patterns/real/elk/board.exp.json
@@ -0,0 +1,367 @@
+{
+ "name": "",
+ "isFolderOnly": false,
+ "fontFamily": "SourceSansPro",
+ "shapes": [
+ {
+ "id": "NETWORK",
+ "type": "rectangle",
+ "pos": {
+ "x": 12,
+ "y": 12
+ },
+ "width": 363,
+ "height": 513,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "#E7E9EE",
+ "fillPattern": "dots",
+ "stroke": "black",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": true,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "NETWORK",
+ "fontSize": 28,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 116,
+ "labelHeight": 36,
+ "labelPosition": "INSIDE_TOP_CENTER",
+ "zIndex": 0,
+ "level": 1
+ },
+ {
+ "id": "NETWORK.CELL TOWER",
+ "type": "rectangle",
+ "pos": {
+ "x": 62,
+ "y": 62
+ },
+ "width": 263,
+ "height": 413,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "#F5F6F9",
+ "fillPattern": "dots",
+ "stroke": "black",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "CELL TOWER",
+ "fontSize": 24,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 143,
+ "labelHeight": 31,
+ "labelPosition": "INSIDE_TOP_CENTER",
+ "zIndex": 0,
+ "level": 2
+ },
+ {
+ "id": "NETWORK.CELL TOWER.satellites",
+ "type": "stored_data",
+ "pos": {
+ "x": 112,
+ "y": 112
+ },
+ "width": 161,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "white",
+ "stroke": "black",
+ "shadow": false,
+ "3d": false,
+ "multiple": true,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "SATELLITES",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": true,
+ "underline": false,
+ "labelWidth": 96,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 3
+ },
+ {
+ "id": "NETWORK.CELL TOWER.transmitter",
+ "type": "rectangle",
+ "pos": {
+ "x": 124,
+ "y": 359
+ },
+ "width": 151,
+ "height": 66,
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "borderRadius": 0,
+ "fill": "white",
+ "stroke": "black",
+ "shadow": false,
+ "3d": false,
+ "multiple": false,
+ "double-border": false,
+ "tooltip": "",
+ "link": "",
+ "icon": null,
+ "iconPosition": "",
+ "blend": false,
+ "fields": null,
+ "methods": null,
+ "columns": null,
+ "label": "TRANSMITTER",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N1",
+ "italic": false,
+ "bold": true,
+ "underline": false,
+ "labelWidth": 106,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "zIndex": 0,
+ "level": 3
+ }
+ ],
+ "connections": [
+ {
+ "id": "NETWORK.CELL TOWER.(satellites -> transmitter)[0]",
+ "src": "NETWORK.CELL TOWER.satellites",
+ "srcArrow": "none",
+ "srcLabel": "",
+ "dst": "NETWORK.CELL TOWER.transmitter",
+ "dstArrow": "triangle",
+ "dstLabel": "",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "black",
+ "borderRadius": 10,
+ "label": "SEND",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 37,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 152,
+ "y": 178
+ },
+ {
+ "x": 152.25,
+ "y": 319
+ },
+ {
+ "x": 162.5,
+ "y": 319
+ },
+ {
+ "x": 162.5,
+ "y": 359
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 0
+ },
+ {
+ "id": "NETWORK.CELL TOWER.(satellites -> transmitter)[1]",
+ "src": "NETWORK.CELL TOWER.satellites",
+ "srcArrow": "none",
+ "srcLabel": "",
+ "dst": "NETWORK.CELL TOWER.transmitter",
+ "dstArrow": "triangle",
+ "dstLabel": "",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "black",
+ "borderRadius": 10,
+ "label": "SEND",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 37,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 192,
+ "y": 178
+ },
+ {
+ "x": 192.5,
+ "y": 218
+ },
+ {
+ "x": 200.25,
+ "y": 218
+ },
+ {
+ "x": 200.25,
+ "y": 359
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 0
+ },
+ {
+ "id": "NETWORK.CELL TOWER.(satellites -> transmitter)[2]",
+ "src": "NETWORK.CELL TOWER.satellites",
+ "srcArrow": "none",
+ "srcLabel": "",
+ "dst": "NETWORK.CELL TOWER.transmitter",
+ "dstArrow": "triangle",
+ "dstLabel": "",
+ "opacity": 1,
+ "strokeDash": 0,
+ "strokeWidth": 2,
+ "stroke": "black",
+ "borderRadius": 10,
+ "label": "SEND",
+ "fontSize": 16,
+ "fontFamily": "mono",
+ "language": "",
+ "color": "N2",
+ "italic": true,
+ "bold": false,
+ "underline": false,
+ "labelWidth": 37,
+ "labelHeight": 21,
+ "labelPosition": "INSIDE_MIDDLE_CENTER",
+ "labelPercentage": 0,
+ "route": [
+ {
+ "x": 233,
+ "y": 178
+ },
+ {
+ "x": 232.75,
+ "y": 218
+ },
+ {
+ "x": 248.25,
+ "y": 218
+ },
+ {
+ "x": 248.25,
+ "y": 319
+ },
+ {
+ "x": 238,
+ "y": 319
+ },
+ {
+ "x": 238,
+ "y": 359
+ }
+ ],
+ "animated": false,
+ "tooltip": "",
+ "icon": null,
+ "zIndex": 0
+ }
+ ],
+ "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/patterns/real/elk/sketch.exp.svg b/e2etests/testdata/patterns/real/elk/sketch.exp.svg
new file mode 100644
index 000000000..0aae66622
--- /dev/null
+++ b/e2etests/testdata/patterns/real/elk/sketch.exp.svg
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+NETWORKCELL TOWERSATELLITESTRANSMITTER SENDSENDSEND
+
+
+
+
+
\ No newline at end of file