render sketch arrowheads separately

d2renderers/d2svg/d2svg.go

@@ -10,6 +10,7 @@ import (
 	"hash/fnv"
 	"html"
 	"io"
+	"regexp"
 	"sort"
 	"strings"
 
@@ -60,6 +61,8 @@ var sketchStyleCSS string
 //go:embed github-markdown.css
 var mdCSS string
 
+var strokeWidthRE = regexp.MustCompile(`(.*stroke-width):(.+?);(.*)`)
+
 type RenderOpts struct {
 	Pad    int
 	Sketch bool
@@ -449,24 +452,32 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 	}
 
 	path := pathData(connection, idToShape)
-	attrs := fmt.Sprintf(`%s%smask="url(#%s)"`,
-		markerStart,
-		markerEnd,
-		labelMaskID,
-	)
+	mask := fmt.Sprintf(`mask="url(#%s)"`, labelMaskID)
 	if sketchRunner != nil {
-		out, err := d2sketch.Connection(sketchRunner, connection, path, attrs)
+		out, err := d2sketch.Connection(sketchRunner, connection, path, mask)
 		if err != nil {
 			return "", err
 		}
-		fmt.Fprintf(writer, out)
+		fmt.Fprint(writer, out)
+
+		// render sketch arrowheads separately
+		// TODO add sketch specific arrowheads
+		if markerStart != "" || markerEnd != "" {
+			// set stroke width to 0
+			style := strokeWidthRE.ReplaceAllString(connection.CSSStyle(), `$1:0;$3`)
+			fmt.Fprintf(writer, `<path d="%s" class="connection" style="fill:none;%s" %s%s/>`,
+				path, style,
+				markerStart,
+				markerEnd,
+			)
+		}
 	} else {
 		animatedClass := ""
 		if connection.Animated {
 			animatedClass = " animated-connection"
 		}
-		fmt.Fprintf(writer, `<path d="%s" class="connection%s" style="fill:none;%s" %s/>`,
-			path, animatedClass, connection.CSSStyle(), attrs)
+		fmt.Fprintf(writer, `<path d="%s" class="connection%s" style="fill:none;%s" %s%s%s/>`,
+			path, animatedClass, connection.CSSStyle(), markerStart, markerEnd, mask)
 	}
 
 	if connection.Label != "" {