Labels

Basic Label

Add text labels to arrows with the label parameter.

{{< arrow from="50,50" to="250,50" label="Click here" >}}

Click here

Label Position

Use label-position to place the label at different points along the arrow.

Start

{{< arrow from="50,50" to="250,50" label="Start" label-position="start" >}}

Start

Middle (default)

{{< arrow from="50,50" to="250,50" label="Middle" label-position="middle" >}}

Middle

End

{{< arrow from="50,50" to="250,50" label="End" label-position="end" >}}

End

Label Offset

Use label-offset to control the distance from the line.

Small Offset

{{< arrow from="50,50" to="250,50" label="Close" label-offset="5" >}}

Close

Default Offset (10)

{{< arrow from="50,50" to="250,50" label="Default" >}}

Default

Large Offset

{{< arrow from="50,50" to="250,50" label="Far" label-offset="25" >}}

Far

Labels with Curves

Labels follow the curve and position perpendicular to the path.

Quadratic Curve

{{< arrow from="50,80" to="250,80" control1="150,20" label="Curved" >}}

Curved

S-Curve

{{< arrow from="50,50" to="250,120" control1="150,0" control2="150,170" label="S-Curve" >}}

S-Curve

Multiple Positions on Curve

{{< arrow from="50,80" to="250,80" control1="150,20" label="Start" label-position="start" color="blue" >}}

Start

{{< arrow from="50,80" to="250,80" control1="150,20" label="Middle" label-position="middle" color="green" >}}

Middle

{{< arrow from="50,80" to="250,80" control1="150,20" label="End" label-position="end" color="red" >}}

End

Labels with Styling

Labels inherit the arrow’s color.

{{< arrow from="50,50" to="250,50" label="Red Arrow" color="red" >}}

Red Arrow

{{< arrow from="50,50" to="250,50" label="Blue Stealth" color="steelblue" head="stealth" >}}

Blue Stealth

{{< arrow from="50,50" to="250,50" label="Thick Line" width="4" head-size="15" >}}

Thick Line

Math and Markdown Labels

A label containing $...$ is parsed as Markdown and typeset by the document’s math renderer (MathJax or KaTeX).

{{< arrow from="50,80" to="250,80" control1="150,20" label="$F_{\mathrm{RP}} = \frac{a^2}{b}$" >}}

\(F_{\mathrm{RP}} = \frac{a^2}{b}\)

Math can be mixed with regular text, and other inline Markdown works too.

{{< arrow from="50,50" to="250,50" label="rate $\alpha_i$" >}}

rate \(\alpha_i\)

{{< arrow from="50,50" to="250,50" label="**bold** and *italic*" label-math="true" >}}

bold and italic

Detection is automatic, but label-math overrides it: "true" always renders the label as HTML, "false" always uses a plain SVG <text> element. Use label-width and label-height to change the size of the box the HTML label is centered in.

Math labels are HTML-only. PDF and Typst output falls back to an unlabelled arrow.