Cycle Diagram
A numbered four step list beside a circular loop diagram with nodes on a dashed ring.
A numbered four step list beside a circular loop diagram with nodes on a dashed ring.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Cycle Diagram is a split process section. The left column carries a heading, a paragraph, and a numbered list of four stages with one line descriptions. The right column draws the same four stages as a loop: circular nodes sitting on a dashed ring with arrowheads showing the direction of travel and a quiet caption in the center. The first node fills with the primary color to mark where the loop begins.
The four steps are a plain array, and the diagram nodes carry their positions in a small data block computed around the ring center, so renaming stages is string work and repositioning is coordinate work. Four nodes is the natural fit for the geometry. The whole diagram is one SVG with token colors, no images.
Reach for this block when your process repeats and improving each pass is the point. A loop says compounding in a way a row of steps cannot: three-step-cards and horizontal-connected describe a journey with an end, this block describes a flywheel. It also pairs naturally with retention or optimization stories where last cycle feeds the next.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is the campaign cycle from planning to learning. Other loops that fit four nodes:
Tip: keep the center caption to a short phrase about improvement, the loop drawing already says repeat, the words should say better.