looping-diagram

name

looping-diagram

description

Generate an SVG circular loop diagram — a ring with labeled arrow segments showing a repeating cycle of steps. Use this skill whenever a user asks for a loop diagram, cycle diagram, circular process visualization, or wants to show a workflow or sequence that repeats. Trigger even for casual phrasings like "make a diagram of my cycle", "show this as a loop", or "visualize these steps going in a circle". The diagram is great any time steps feed back into each other.

Generate a circular loop SVG using the bundled script and save it as a file.

Script

scripts/loop-diagram.js exports generateLoopDiagram(options) which returns an SVG string.

const { generateLoopDiagram } = require('<absolute-path-to-skill>/scripts/loop-diagram.js');
const fs = require('fs');

const svg = generateLoopDiagram({
  labels: ['Plan', 'Build', 'Test', 'Deploy'],
  centerText: 'DevOps',
  color: '#a8d8ea',
  fontSize: 18,
  strokeWidth: 60,
  arrowSize: 80,
  width: 500,
  height: 500,
});

fs.writeFileSync('loop-diagram.svg', svg);

Use __dirname or the skill's absolute path when requiring the script.

Parameters

Parameter	Default	Effect
labels	—	Text for each arrow segment; 2 or more required
centerText	''	Optional text in the centre of the ring
color	'#f7dfd6'	Ring and arrow fill colour (any CSS colour)
fontSize	18	Label font size in px
strokeWidth	60	Ring thickness in px
arrowSize	80	Arrowhead size in px
shadowColor	'rgba(0,0,0,0.2)'	Shadow colour — any CSS colour or rgba string
shadowBlur	6	Shadow blur radius in px; 0 = hard-edged, higher = softer
width / height	500	SVG canvas size in px
cx / cy	250	Ring centre point — set to width/2, height/2
r	140	Ring radius — scale with width/height

Interpreting user requests

Labels: use the user's exact words. Keep each label short (1–4 words) — long text overflows the arc segment. If the user gives longer phrases, abbreviate and ask for confirmation.

Colour: accept any CSS colour name (steelblue, tomato) or hex (#4a90d9). One colour applies to the whole ring and arrows. If the user doesn't mention colour, use the default warm pink.

Shadow: shadowColor accepts any CSS colour or rgba string (e.g. 'rgba(0,0,0,0.4)', 'navy'). shadowBlur controls softness — 0 gives a hard-edged shadow, 10–20 gives a very diffuse glow. The arrow blur is automatically set to half the ring blur to keep proportions balanced.

Size: if the user wants larger or smaller output, scale width, height, cx (= width/2), cy (= height/2), and r proportionally. The default 500 px canvas has r = 140; for an 800 px canvas use r ≈ 220.

Number of steps: the script handles any count ≥ 2. More steps means smaller arc segments and smaller text — consider increasing width/height for 6+ labels.

Output

1. Write a small Node.js runner, execute it, and save the SVG to the working directory.
2. If the present_files tool is available, present the SVG file to the user.
3. Otherwise, tell the user the file path so they can open it.