Diagram Rendering (Mermaid)

Render Mermaid diagram code to SVG and/or PNG: flowchart, sequence, class, state, ER, gantt, pie, mindmap, timeline and more. Invalid syntax returns HTTP 400 with the Mermaid parse error (not charged), so an agent can fix and retry. Params: code (Mermaid source, required), format (svg default, png or both), theme (default, dark, neutral, forest, base), width (200 to 4000, default 1200), background.

Run free trial ↗1 free call per day with the example input. Paid: $0.006 USDC, no limit.

Call it

import { wrapFetchWithPayment, x402Client } from "@x402/fetch";
import { registerExactEvmScheme } from "@x402/evm/exact/client";
import { privateKeyToAccount } from "viem/accounts";

const client = new x402Client();
registerExactEvmScheme(client, { signer: privateKeyToAccount(process.env.EVM_PRIVATE_KEY) });
const payFetch = wrapFetchWithPayment(fetch, client);

const res = await payFetch("https://agentsvc.io/api/v1/proxy/diagram-render", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({"code":"flowchart LR\n  A[Agent] -->|HTTP 402| B(agentsvc.io)\n  B --> C{Paid?}\n  C -->|yes| D[JSON result]","format":"svg"}),
});
const { data, payment } = await res.json();  // payment.transaction = on-chain receipt

Input

Field	Type	Description
code *	string	Mermaid diagram source
format	svg \| png \| both = "svg"
theme	default \| dark \| neutral \| forest \| base = "default"
width	integer = 1200
background	string

Output

Field	Type	Description
diagram_type	string
theme	string
svg	string
svg_bytes	integer
format	string

Example response (data)

{
  "diagram_type": "flowchart",
  "theme": "default",
  "svg": "<svg id=\"dccuoprioa\" width=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" class=\"flowchart\" style=\"max-width: 948.234375px;\" …",
  "svg_bytes": 13690,
  "format": "svg"
}