Merge pull request #1955 from danielsuh05/issue1827

feature: supports link on connections

ci/release/changelogs/next.md

@@ -1,5 +1,6 @@
 #### Features 🚀
 
+- Connections now support `link` [#1955](https://github.com/terrastruct/d2/pull/1955)
 - Vars: vars in markdown blocks are substituted [#2218](https://github.com/terrastruct/d2/pull/2218)
 - Markdown: Github-flavored tables work in `md` blocks [#2221](https://github.com/terrastruct/d2/pull/2221)
 

d2compiler/compile.go

@@ -681,6 +681,13 @@ func (c *compiler) compileReserved(attrs *d2graph.Attributes, f *d2ir.Field) {
 	case "classes":
 	}
 
+	if attrs.Link != nil && attrs.Label.Value != "" {
+		u, err := url.ParseRequestURI(attrs.Label.Value)
+		if err == nil && u.Host != "" {
+			c.errorf(scalar, "Label cannot be set to URL when link is also set (for security)")
+		}
+	}
+
 	if attrs.Link != nil && attrs.Tooltip != nil {
 		u, err := url.ParseRequestURI(attrs.Tooltip.Value)
 		if err == nil && u.Host != "" {

d2compiler/compile_test.go

@@ -1639,6 +1639,27 @@ a.style.fill: null
 				}
 			},
 		},
+		{
+			name:   "no_url_link_and_path_url_label_concurrently",
+			text:   `x -> y: https://google.com {link: https://not-google.com }`,
+			expErr: `d2/testdata/d2compiler/TestCompile/no_url_link_and_path_url_label_concurrently.d2:1:35: Label cannot be set to URL when link is also set (for security)`,
+		},
+		{
+			name: "url_link_and_path_url_label_concurrently",
+			text: `x -> y: hello world {link: https://google.com}`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				if len(g.Edges) != 1 {
+					t.Fatal(len(g.Edges))
+				}
+				if g.Edges[0].Link.Value != "https://google.com" {
+					t.Fatal(g.Edges[0].Link.Value)
+				}
+
+				if g.Edges[0].Label.Value != "hello world" {
+					t.Fatal(g.Edges[0].Label.Value)
+				}
+			},
+		},
 		{
 			name: "nil_scope_obj_regression",
 

d2exporter/export.go

@@ -354,6 +354,9 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
 	if edge.Style.Font != nil {
 		connection.FontFamily = edge.Style.Font.Value
 	}
+	if edge.Link != nil {
+		connection.Link = edge.Link.Value
+	}
 	connection.Label = text.Text
 	connection.LabelWidth = text.Dimensions.Width
 	connection.LabelHeight = text.Dimensions.Height

d2renderers/d2svg/d2svg.go

@@ -635,11 +635,23 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		textEl := d2themes.NewThemableElement("text", inlineTheme)
 		textEl.X = labelTL.X + float64(connection.LabelWidth)/2
 		textEl.Y = labelTL.Y + float64(connection.FontSize)
-		textEl.Fill = connection.GetFontColor()
 		textEl.ClassName = fontClass
 		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize)
 		textEl.Content = RenderText(connection.Label, textEl.X, float64(connection.LabelHeight))
+
+		if connection.Link != "" {
+			textEl.ClassName += " text-underline text-link"
+
+			fmt.Fprintf(writer, `<a href="%s" xlink:href="%[1]s">`, svg.EscapeText(connection.Link))
+		} else {
+			textEl.Fill = connection.GetFontColor()
+		}
+
 		fmt.Fprint(writer, textEl.Render())
+
+		if connection.Link != "" {
+			fmt.Fprintf(writer, "</a>")
+		}
 	}
 
 	if connection.SrcLabel != nil && connection.SrcLabel.Label != "" {
@@ -1590,6 +1602,22 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
 }`,
 	)
 
+	appendOnTrigger(
+		buf,
+		source,
+		[]string{
+			`text-link`,
+		},
+		`
+.text-link {
+	fill: blue;
+}
+
+.text-link:visited {
+	fill: purple;
+}`,
+	)
+
 	appendOnTrigger(
 		buf,
 		source,

d2target/d2target.go

@@ -599,6 +599,9 @@ type Connection struct {
 	LabelPosition   string  `json:"labelPosition"`
 	LabelPercentage float64 `json:"labelPercentage"`
 
+	Link       string `json:"link"`
+	PrettyLink string `json:"prettyLink,omitempty"`
+
 	Route   []*geo.Point `json:"route"`
 	IsCurve bool         `json:"isCurve,omitempty"`