Circle Flow

The .circle-flow style arranges items as nodes on a ring, connected by arrows. It is the original style and the namesake of the extension.

Basic usage

::: circle-flow
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

Item count

The layout automatically adjusts to any number of items. With a single item there is no arrow.

Alice

With two items, arrows are offset so they don’t overlap.

Alice

Bob

Three or more items are arranged evenly around the circle.

Alice

Bob

Carol

Alice

Bob

Carol

Dave

Node size scales down automatically as more items are added.

Alice

Bob

Carol

Dave

Ethan

Alice

Bob

Carol

Dave

Ethan

Fiona

What’s next

• Node Shapes — change how individual nodes look
• Arrow Types — change how items are connected
• Colors — control node and arrow colors