---
title: "Quickstart"
description: "Generate your first SVG diagram with the svgdiagram.ai API."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.svgdiagram.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

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:

1. An active account on [svgdiagram.ai](https://svgdiagram.ai).
2. An API Key starting with `svg_sk_...` from your [Account Settings](https://svgdiagram.ai/settings).

---

1. **Step 1**

   ### Step 1: Generate a Diagram

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

   ### cURL

   ```bash
   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"
     }'
   ```

   ### JavaScript (Fetch)

   ```javascript
   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);
   ```
2. **Step 2**

   ### 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.

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

   ### Step 3: Re-render for Free (Optional)

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

   ```bash
   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"
     }'
   ```

   > **Tip**
   >
   > Re-rendering reuses existing diagram structure and parameters. It costs **0 credits**.

---

## Next Steps

- Learn about [Authentication](/authentication) header security.
- Explore [Diagram Generation](/generation) parameters and design selection.
- View all available endpoints in the [API Reference](/api).

Source: https://docs.svgdiagram.ai/quickstart/index.mdx