TwoMinuteCycle
Slide Deck Quality Cycle Diagrams in 2 minutes or less

Cycle Diagram HTTP API

POST a small JSON description and get back a deck-ready PNG (or SVG). The endpoint is open and CORS-enabled, so it works from browsers, scripts, CI and anywhere else you can make an HTTP call. The same JSON opens in the builder.

POST https://www.twominutetoolkit.com/api/render/cycle
Fair use: rate-limited to 20 requests a minute per IP (bursts capped at 5 a second), shared across every Two Minute tool, with a 64 KB body cap. No key or sign-up needed.

Try it

Open in builder

Code samples


        

        

      

    


    

      

        
Live preview

        
Click Render to call the API.

      

      

        
Request body

        

            
FieldTypeDescription

            
titlestringHeading shown top-left of the chart at 22px bold. Every chart has one title row; an empty string hides it.
max 140 chars · default "Cycle"

            
centerstringOptional label in the middle of the loop, e.g. the goal the cycle serves ("Customer value"). Bold, wrapped to up to 3 lines. Omit for none.
max 80 chars

            
stylestring"nodes" (default): coloured circles on a ring joined by curved arrows, stage names inside the circles. "segments": a thick ring cut into coloured arrow-shaped segments, stage names outside.
"nodes", "segments" · default "nodes"

            
widthintegerChart width in pixels (640–2400, default 1280, which suits a 16:9 slide). PNG output renders at 2x. Height is always computed from the content.
640–2400 · default 1280

            
palettestring[]Hex colours applied in order to items that have no colour of their own. Pass the user's brand colours here when they name them. Default: indigo, sky, emerald, amber, red, gray.
max 12 items · default ["#4f46e5","#0ea5e9","#10b981","#f59e0b","#ef4444","#6b7280"]

            
stagesrequiredobject[]The stages in order (3–8). The first sits at 12 o'clock and the loop runs clockwise, back from the last stage to the first. Fewer than 3 still render but are reported as a warning; more than 8 are dropped.
max 8 items

          

      

      

        
stages[] item

        

            
FieldTypeDescription

            
namerequiredstringStage name, 1–3 words reads best (e.g. "Plan", "Build"). Long names shrink and wrap to 2 lines.
max 60 chars

            
detailstringOptional short description shown outside the ring next to the stage, wrapped to up to 3 lines (about 12 words).
max 160 chars

            
colorstringHex colour, e.g. "#4f46e5". Optional: stages without one take the next palette colour.
max 40 chars

          

      

      

        
Endpoints

        
    
          
  • POST /api/render/cycle returns image/png; add ?format=svg for SVG.
    • 
          
  • GET /cycle.png?d=<payload> and /cycle.svg?d=<payload> render a chart from a link. The payload is the JSON body, raw-deflated and base64url-encoded. Nothing is stored: links are permanent and cached for a year.
    • 
          
  • /cycle#d=<payload> opens the same chart in the builder for editing.
    • 
          
  • GET /api/render/cycle?demo=1 returns the demo chart.
    • 
          
  • GET /api/schema/cycle returns the JSON Schema, for code generators and AIs.
    • 
        

      

      

        
Errors and adjustments

        
Input is lenient where the intent is clear: numeric strings become numbers, out-of-range values are clamped, and unknown fields are ignored. Adjustments are listed in the X-Render-Warnings header. Anything unclear returns a 400 that says how to fix it:

        
{
  "error": "Invalid payload",
  "issues": [{ "path": "tasks", "message": "must be an array" }],
  "example": { … }
}

      

      

        
Calling from an AI assistant?

        
Use the hosted MCP server instead. It gives Claude, Cursor and other MCP clients a create_cycle tool that returns the image plus image, SVG and edit links. See the MCP page →