Cycle

The .cycle style arranges items as arc-shaped arrows around a ring, each pointing to the next and the last looping back to the first. It is the classic “process wheel” for continuous, repeating processes. Like all styles in this extension, it is activated via filters: [diagrams].

Tip

For nodes positioned on a ring connected by separate arrows, use .circle-flow instead. .cycle makes the stages themselves the arrows.

Basic usage

::: cycle
::: item
Plan
:::
::: item
Do
:::
::: item
Check
:::
::: item
Act
:::
:::

Plan

Do

Check

Act

Any number of stages

The ring divides evenly across however many items you provide.

::: cycle
::: item
Strategy
:::
::: item
Design
:::
::: item
Build
:::
::: item
Test
:::
::: item
Launch
:::
::: item
Review
:::
:::

Strategy

Design

Build

Test

Launch

Review

Colors

Use node-color= on the container to set the base color for all segments, or color= on an individual item to override a single segment.

::: {.cycle node-color="#7a3b5c"}
::: item
Build
:::
::: {.item color="#3b7a5c"}
Measure
:::
::: item
Learn
:::
:::

Build

Measure

Learn