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].
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
Annotations
Give any item a nested .annotation div to attach an external callout that points at its segment with a leader line. The annotation content is free-form Markdown; any bold text or heading is tinted to match the segment color, which is handy for a title (but optional). Annotate all, some, or none of the segments.
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.
::::: cycle
:::: item
Collect
::: annotation
**Collect** gather raw data from all available sources
:::
::::
:::: item
Clean
::: annotation
**Clean** remove errors and standardize the format
:::
::::
:::: item
Analyze
::: annotation
**Analyze** find patterns and extract insights
:::
::::
:::: item
Report
::: annotation
**Report** share findings with stakeholders
:::
::::
:::::Collect
Collect gather raw data from all available sources
Clean
Clean remove errors and standardize the format
Analyze
Analyze find patterns and extract insights
Report
Report share findings with stakeholders
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.