What it does
Add your steps and Cycle Process Diagram arranges them around a circle, evenly spaced, with curved arrows showing the flow from one step to the next — and back to the start. Brand flywheels, customer loops, PDCA, product lifecycles, service cycles: if it goes around, this draws it.
Change the number of steps and every angle and arrow recalculates by itself. No manual positioning, no drawing arcs by hand.
Hover, click or use the arrow keys on any step to highlight it and read its description. Turn on Auto Cycle and the highlight walks around the loop on its own.
Customizable properties
- Steps — title, description, icon (12 built-in icons or numbers), color and optional image for each step (up to 12)
- Direction — Clockwise or Counter-clockwise
- Start Angle — rotate where Step 1 sits on the circle
- Details — show the description in the Center, in a Side panel, or as a Tooltip
- Auto Cycle — highlight steps one by one, with your own interval; pauses on hover
- Node Shape — Circle, Pill or Card
- Layout — node size, radius, ring width, arrow gap, ring and arrows on/off
- Style — accent, text, ring, arrow and node colors
- Fonts — separate title, label and body fonts
Why this component
- Steps in, diagram out: add or remove a step and the geometry updates itself.
- Descriptions live inside the diagram — a Center, Side or Tooltip panel, not a separate text block.
- Fits any space: the whole diagram scales down on small screens, and the Side panel drops below on mobile.
- Keyboard accessible: every step is a button; arrow keys move between steps, Esc clears.
- Pauses itself when off-screen and respects reduced-motion settings.
Need help?
Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.
