Arrowhead Styles

Default Arrow

The default head="arrow" style is a filled triangle.

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

Arrowhead Styles

Arrow (default)

{{< arrow from="50,30" to="250,30" head="arrow" >}}

Stealth

Military-style pointed arrowhead.

{{< arrow from="50,30" to="250,30" head="stealth" >}}

Diamond

Diamond/rhombus shape.

{{< arrow from="50,30" to="250,30" head="diamond" >}}

Circle / Dot

Round endpoint.

{{< arrow from="50,30" to="250,30" head="circle" >}}

{{< arrow from="50,30" to="250,30" head="dot" >}}

Square

Square endpoint.

{{< arrow from="50,30" to="250,30" head="square" >}}

Bar / Stop

Flat perpendicular line.

{{< arrow from="50,30" to="250,30" head="bar" >}}

Barbed

Hook-like, open arrow style.

{{< arrow from="50,30" to="250,30" head="barbed" >}}

None

No arrowhead at all.

{{< arrow from="50,30" to="250,30" head="none" >}}

Arrowhead Placement

End Only (default)

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

Start Only

{{< arrow from="50,30" to="250,30" head-start="true" head-end="false" >}}

Both Ends

{{< arrow from="50,30" to="250,30" head-start="true" head-end="true" >}}

Neither End

{{< arrow from="50,30" to="250,30" head-start="false" head-end="false" >}}

Outline vs Filled

Use head-fill="false" for outline arrowheads.

Filled (default)

{{< arrow from="50,30" to="250,30" head="arrow" head-fill="true" >}}

{{< arrow from="50,30" to="250,30" head="diamond" head-fill="true" >}}

Outline

{{< arrow from="50,30" to="250,30" head="arrow" head-fill="false" >}}

{{< arrow from="50,30" to="250,30" head="diamond" head-fill="false" >}}

Combined with Curves

Arrowhead styles work with all curve types.

Stealth with Quadratic Curve

{{< arrow from="50,50" to="250,50" control1="150,0" head="stealth" color="purple" >}}

Diamond with Cubic Curve

{{< arrow from="50,30" to="250,100" control1="100,0" control2="200,130" head="diamond" color="teal" >}}

Both Ends with S-Curve

{{< arrow from="50,30" to="250,100" control1="100,0" control2="200,130" head="stealth" head-start="true" color="crimson" >}}

Arrowhead Size

Use head-size to set the arrowhead size independently from size.

Default Size

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

Small Arrowhead

{{< arrow from="50,30" to="250,30" head-size="5" >}}

Large Arrowhead

{{< arrow from="50,30" to="250,30" head-size="20" >}}

With Different Styles

{{< arrow from="50,30" to="250,30" head="stealth" head-size="15" >}}

{{< arrow from="50,30" to="250,30" head="diamond" head-size="18" color="teal" >}}