From ec68dc149c13a7daa282d26ff9de2a8014a197b7 Mon Sep 17 00:00:00 2001
From: Alexander Wang <alex@terrastruct.com>
Date: Thu, 24 Nov 2022 01:04:47 -0800
Subject: [PATCH 1/2] 2022-11-24 01:04:47AM

---
 d2renderers/d2svg/d2svg.go                            | 4 ++++
 e2etests/stable_test.go                               | 1 +
 e2etests/testdata/stable/stylish/dagre/board.exp.json | 2 +-
 e2etests/testdata/stable/stylish/dagre/sketch.exp.svg | 2 +-
 e2etests/testdata/stable/stylish/elk/board.exp.json   | 2 +-
 e2etests/testdata/stable/stylish/elk/sketch.exp.svg   | 2 +-
 6 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 5cef9be2f6..d32a1749a1 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -755,6 +755,10 @@ func shapeStyle(shape d2target.Shape) string {
 	out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
 	out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
 	out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
+	if shape.StrokeDash != 0 {
+		dashSize, gapSize := getStrokeDashAttributes(float64(shape.StrokeWidth), shape.StrokeDash)
+		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
+	}
 
 	return out
 }
diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go
index 0edc06849c..2bfb4d5a58 100644
--- a/e2etests/stable_test.go
+++ b/e2etests/stable_test.go
@@ -909,6 +909,7 @@ x: {
 
 y: {
   style: {
+    stroke-dash: 5
     opacity: 0.6
     fill: red
     3d: true
diff --git a/e2etests/testdata/stable/stylish/dagre/board.exp.json b/e2etests/testdata/stable/stylish/dagre/board.exp.json
index 5b4f850f05..2fe57244ab 100644
--- a/e2etests/testdata/stable/stylish/dagre/board.exp.json
+++ b/e2etests/testdata/stable/stylish/dagre/board.exp.json
@@ -50,7 +50,7 @@
       "height": 126,
       "level": 1,
       "opacity": 0.6,
-      "strokeDash": 0,
+      "strokeDash": 5,
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "red",
diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
index 8930df741e..41ab463974 100644
--- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
@@ -22,7 +22,7 @@ width="314" height="552" viewBox="-100 -100 314 552"><style type="text/css">
 		<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
 		<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
 	</filter>
-</defs><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:black">x</text><g class="shape" ><polygon points="0,226 15,211 129,211 114,226 0,226 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;"/><polygon points="114,226 129,211 129,337 114,352 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;"/><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:black">y</text><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /><style type="text/css"><![CDATA[
+</defs><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:black">x</text><g class="shape" ><polygon points="0,226 15,211 129,211 114,226 0,226 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><polygon points="114,226 129,211 129,337 114,352 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:black">y</text><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
diff --git a/e2etests/testdata/stable/stylish/elk/board.exp.json b/e2etests/testdata/stable/stylish/elk/board.exp.json
index b77c208317..359ae55f32 100644
--- a/e2etests/testdata/stable/stylish/elk/board.exp.json
+++ b/e2etests/testdata/stable/stylish/elk/board.exp.json
@@ -50,7 +50,7 @@
       "height": 126,
       "level": 1,
       "opacity": 0.6,
-      "strokeDash": 0,
+      "strokeDash": 5,
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "red",
diff --git a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
index 2d8f1e9ec9..3ced4bfd23 100644
--- a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
@@ -22,7 +22,7 @@ width="527" height="326" viewBox="-88 -88 527 326"><style type="text/css">
 		<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
 		<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
 	</filter>
-</defs><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">x</text><g class="shape" ><polygon points="225,12 240,-3 354,-3 339,12 225,12 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;"/><polygon points="339,12 354,-3 354,123 339,138 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;"/><rect x="225" y="12" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;" /></g><text class="text-bold" x="282.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">y</text><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 128.500000 75.000000 L 221.000000 75.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /><style type="text/css"><![CDATA[
+</defs><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">x</text><g class="shape" ><polygon points="225,12 240,-3 354,-3 339,12 225,12 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><polygon points="339,12 354,-3 354,123 339,138 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><rect x="225" y="12" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text class="text-bold" x="282.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">y</text><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 128.500000 75.000000 L 221.000000 75.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

From bbf005c7676cce89115aaf31450267539bf6b000 Mon Sep 17 00:00:00 2001
From: Alexander Wang <alex@terrastruct.com>
Date: Thu, 24 Nov 2022 01:07:25 -0800
Subject: [PATCH 2/2] 2022-11-24 01:07:25AM

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

diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index ebf3b6455b..196366431b 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -1,6 +1,7 @@
 #### Features 🚀
 
 - Arrowhead labels are now supported. [#182](https://github.com/terrastruct/d2/pull/182)
+- `stroke-dash` on shapes is now supported. [#188](https://github.com/terrastruct/d2/issues/188)
 
 #### Improvements 🔧