Quickstart | svgdiagram.ai Docs

Get up and running with svgdiagram.ai in just a few steps. You can interact with the API using cURL, plain JavaScript fetch, or any standard HTTP client.

Prerequisites

Before calling the API, make sure you have:

An active account on svgdiagram.ai.
An API Key starting with svg_sk_... from your Account Settings.

Step 1: Generate a Diagram

Send a request to POST /rest/v1/generations with your prompt brief:

curl -X POST https://svgdiagram.ai/rest/v1/generations \
  -H "Authorization: Bearer svg_sk_your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "User authentication flow with signup, email verification, and token issuance",
    "design": "auto",
    "appearance": "light"
  }'

const API_KEY = "svg_sk_your_api_key";

const response = await fetch("https://svgdiagram.ai/rest/v1/generations", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${API_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    prompt: "User authentication flow with signup, email verification, and token issuance",
    design: "auto",
    appearance: "light"
  })
});

const data = await response.json();
console.log("Diagram ID:", data.item.id);
console.log("SVG Source:", data.item.svg);

Step 2: Save or Render the SVG

The response returns data.item.svg containing standalone SVG code. You can insert this SVG directly into your web DOM, save it to disk, or serve it to your users.

// In a browser environment
document.getElementById("diagram-container").innerHTML = data.item.svg;

Step 3: Re-render for Free (Optional)

Need to change the diagram to dark mode or switch fonts? Use the free re-render endpoint:

curl -X POST https://svgdiagram.ai/rest/v1/generations/YOUR_DIAGRAM_ID/render \
  -H "Authorization: Bearer svg_sk_your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
    "appearance": "dark",
    "fontId": "barlow-condensed"
  }'

Next Steps

Learn about Authentication header security.
Explore Diagram Generation parameters and design selection.
View all available endpoints in the API Reference.