Arrow Types

The arrow style is controlled by a modifier class on the .circle-flow container. The default is arrow-chevron.

arrow-chevron (default)

Div-based filled chevron shapes, scaled proportionally with node size.

::: {.circle-flow .node-box}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

Filled SVG arrow shapes — an outer arc, inner arc, and pointed tip between each pair of nodes.

::: {.circle-flow .node-box .arrow-curved}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

SVG thin straight lines with arrowheads.

::: {.circle-flow .node-box .arrow-thin}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

A single SVG circle behind all nodes, with a mask to cleanly hide the ring inside each node.

::: {.circle-flow .node-box .arrow-ring}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

A single filled SVG arrow shape going clockwise around all nodes.

::: {.circle-flow .node-box .arrow-arc}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

SVG thin lines with arrowheads on both ends.

::: {.circle-flow .node-box .arrow-double}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol