quarto-arrow

Draw curved SVG arrows in Quarto documents

A Quarto extension for drawing arrows with Bezier curves. Perfect for annotations, callouts, and visual explanations.

Installation

quarto add emilhvitfeldt/quarto-arrow

Quick Start

Add the filter to your YAML header:

---
title: My Document
format: html
filters:
  - arrow
---

Then use the shortcode:

{{< arrow from="50,50" to="200,100" >}}

Examples

Basic Arrows

Straight lines, quadratic curves, and cubic Bezier curves.

View Example Source Code

Styling Options

Colors, stroke widths, dash patterns, and arrowhead sizes.

View Example Source Code

Arrowhead Styles

Multiple arrowhead styles: arrow, stealth, diamond, circle, square, bar, barbed, and none.

View Example Source Code

Line Styles

Dotted, double, and triple line patterns.

View Example Source Code

Labels

Add text labels to arrows with positioning options.

View Example Source Code

Advanced Curves

Simple curve parameter instead of manual control points.

View Example Source Code

Positioned Arrows

Absolute and fixed positioning for document-level annotations.

View Example Source Code

RevealJS Presentations

Arrows work in RevealJS slides with draw animations that reveal arrows step-by-step.

View Example Source Code

Syntax Reference

Basic Usage

{{< arrow from="x1,y1" to="x2,y2" >}}

With Control Points

{{< arrow from="50,50" to="200,100" control1="125,0" >}}
{{< arrow from="50,50" to="200,100" control1="100,0" control2="150,150" >}}

Styling Parameters

Parameter Default Description
from required Start point "x,y"
to required End point "x,y"
control1 - First control point for curves
control2 - Second control point (cubic Bezier)
curve - Curviness 0-1 (alternative to control points)
bend "left" Bend direction: "left", "right", or angle in degrees
waypoints - Intermediate points: "x1,y1; x2,y2; ..."
smooth true Smooth curves through waypoints (vs straight segments)
color "black" Stroke color
width 2 Stroke width in pixels
size 10 Arrowhead size
dash - Dash pattern (e.g., "5,5" or "true")
line "single" Line style (see below)
opacity 1 Stroke opacity (0-1)
position - "absolute" or "fixed"
head "arrow" Arrowhead style (see below)
head-start false Show arrowhead at start
head-end true Show arrowhead at end
head-fill true Filled (true) or outline (false)
head-size size Independent arrowhead size (overrides size)
label - Text label for the arrow
label-position "middle" Label position: "start", "middle", or "end"
label-offset 10 Distance from the line (perpendicular)
fragment - RevealJS fragment with draw animation ("true")
fragment-index - RevealJS fragment order (number)
fragment-duration 0.5 Draw animation duration in seconds
aria-label - Screen reader description
alt - Alternative text (fallback for aria-label)
title - Tooltip text (visible on hover)

Line Styles

Style Description
single Default single line
dot Dotted line pattern
double Parallel double line
triple Three parallel lines

Arrowhead Styles

Style Description
arrow Default filled triangle
stealth Pointed, angular military-style
diamond Diamond/rhombus shape
circle Round endpoint
dot Alias for circle
square Square endpoint
bar Flat perpendicular line
barbed Hook-like, open arrow
none No arrowhead

Color Support

The color parameter accepts different values depending on output format:

Format Supported Values
HTML/RevealJS All CSS colors: names (red, steelblue), hex (#ff0000), rgb(), rgba(), hsl()
PDF LaTeX color names: red, blue, green, yellow, orange, purple, cyan, magenta, gray, black, white
Typst Common color names with automatic conversion for CSS names like crimson, teal, pink

For maximum cross-format compatibility, use basic color names: red, blue, green, black, orange, purple, gray.

Positioning Modes

Inline (default): Arrow renders in document flow.

{{< arrow from="50,50" to="200,100" >}}

Absolute: Positioned relative to document body, scrolls with page.

{{< arrow from="600,80" to="780,15" position="absolute" >}}

Fixed: Positioned relative to viewport, stays in place while scrolling.

{{< arrow from="100,100" to="300,50" position="fixed" >}}

Scoped Absolute: Use inside a position: relative container.

::: {style="position: relative;"}
{{< arrow from="50,50" to="200,100" position="absolute" >}}
:::

Format Support

Format Status Notes
HTML Full support All features available
PDF Full support Uses TikZ (example)
Typst Full support Uses CeTZ (example)
RevealJS Full support Draw animations (example)
Other Fallback Renders as -> text

PDF Setup

For PDF output, add TikZ to your document header:

---
format: pdf
header-includes:
  - \usepackage{tikz}
  - \usetikzlibrary{arrows.meta}
---

Typst Setup

Typst output uses the CeTZ package which is automatically imported. No additional setup required:

---
format: typst
---

See Also