SIPOC Diagram API: JSON to SIPOC PNG or SVG

Try it

Open in builder

Code samples

Live preview

Click Render to call the API.

Request body

Field	Type	Description
title	string	Heading shown top-left of the chart at 22px bold. Every chart has one title row; an empty string hides it. max 140 chars · default "SIPOC"
width	integer	Chart width in pixels (640–2400, default 1280, which suits a 16:9 slide). PNG output renders at 2x. Height is computed from the tallest column. 640–2400 · default 1280
palette	string[]	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"]
process	string	Optional name of the process, shown in bold at the top of the Process column, e.g. "Order to cash". Omit for none. Wraps to two lines, then truncates. max 80 chars
suppliers	string[]	Who provides the inputs (0–8; extras are dropped with a warning), one card each, e.g. ["Customer", "Sales team", "Warehouse"]. Short phrases; long ones wrap onto up to four lines. max 8 items
inputs	string[]	What the suppliers provide to the process (0–8), one card each, e.g. ["Purchase order", "Stock levels"]. max 8 items
stepsrequired	string[]	Required: the high-level process steps, top to bottom (1–7, ideally 4–7; fewer than 2 renders with a warning, extras are dropped with a warning). Each is a step box joined to the next by a down arrow, e.g. ["Receive order", "Check credit", "Pick and pack", "Ship", "Invoice"]. Start each with a verb. max 7 items
outputs	string[]	What the process produces (0–8), one card each, e.g. ["Shipped order", "Invoice"]. max 8 items
customers	string[]	Who receives the outputs (0–8), one card each, e.g. ["Customer", "Finance"]. Internal teams count as customers too. max 8 items
start	string	Optional start boundary: the trigger that begins the process, shown above the steps as "Starts when …", e.g. "Customer places an order". Omit for none. max 120 chars
end	string	Optional end boundary: the event that completes the process, shown below the steps as "Ends when …", e.g. "Payment is received". Omit for none. max 120 chars
numbered	boolean	Number the process steps 1, 2, 3… in coloured circles. Default true; false shows plain step boxes. default true
colors	object	Optional colour overrides per column, keyed by its letter, e.g. {"p": "#0f766e"}. Columns without one take the palette colours in order: S the first, I the second, P the third, O the fourth, C the fifth.

colors

Field	Type	Description
s	string	Hex colour for the Suppliers column, e.g. "#4f46e5". max 40 chars
i	string	Hex colour for the Inputs column. max 40 chars
p	string	Hex colour for the Process column (its letter, step numbers and step boxes). max 40 chars
o	string	Hex colour for the Outputs column. max 40 chars
c	string	Hex colour for the Customers column. max 40 chars

Endpoints

POST /api/render/sipoc returns image/png; add ?format=svg for SVG.
GET /sipoc.png?d=<payload> and /sipoc.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.
/sipoc#d=<payload> opens the same chart in the builder for editing.
GET /api/render/sipoc?demo=1 returns the demo chart.
GET /api/schema/sipoc 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_sipoc tool that returns the image plus image, SVG and edit links. See the MCP page →