d2renderer: #384 The arrowhead crow feet variants

ci/release/changelogs/next.md

@@ -1,5 +1,7 @@
 #### Features 🚀
 
+- Crow foot notation is now supported. [#578](https://github.com/terrastruct/d2/pull/578)
+
 #### Improvements 🧹
 
 #### Bugfixes ⛑️

d2renderers/d2svg/d2svg.go

@@ -113,6 +113,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 +223,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 ""
 	}

d2target/d2target.go

@@ -280,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{}{
@@ -288,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 {
@@ -299,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
 	}

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)