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

Annotations

Give any item a nested .annotation div to attach an external callout that points at its node with a leader line. The annotation content is free-form Markdown; any bold text or heading is tinted to match the node color, which is handy for a title (but optional). Annotate all, some, or none of the nodes.

Nest the fenced divs with more colons on the outer fences (::::: for the chart, :::: for each item, ::: for the annotation) and leave a blank line around the inner fences.

::::: circle-flow

:::: item
Plan

::: annotation
**Plan** define scope, goals, and success metrics up front
:::

::::

:::: item
Build

::: annotation
**Build** implement the work in small, reviewable increments
:::

::::

:::: item
Ship

::: annotation
**Ship** release to users and monitor for issues
:::

::::

:::::

Plan

Plan define scope, goals, and success metrics up front

Build

Build implement the work in small, reviewable increments

Ship

Ship release to users and monitor for issues

The leader lines can be restyled (dashed, dotted, removed) and the colors adjusted — see the Annotations concept page for the full set of ann-line, ann-line-color, and ann-title-color options, which work on every annotated layout.

What’s next