---
title: "Styling & Re-rendering"
description: "Customizing colors, appearances, typography, and free re-rendering."
---

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

# Styling & Re-rendering

`svgdiagram.ai` provides flexible styling controls allowing you to customize diagram aesthetics. Crucially, re-rendering an existing diagram with new visual parameters is **completely free**.

---

## Free Re-rendering

Once a diagram has been created, you can update its visual appearance, font, palette, or options using `POST /rest/v1/generations/:id/render`:

- **Cost**: **0 credits** (Free!)
- **Speed**: Instantaneous (No AI model call required)
- **Preservation**: Structure, text content, and layout logic remain untouched.

### Re-render Request Example

```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",
    "fontLocked": true
  }'
```

---

## Appearance Modes

Every diagram supports neutral light and dark appearances:

- `"light"`: Soft neutral workspace background (`#FAFAFA`), crisp light cards, and dark readable typography.
- `"dark"`: Deep slate background (`#0F0F0F`), dark surfaces, and light text contrast.

### Previewing Appearances

To get side-by-side light and dark preview SVGs before applying changes:

```http
GET /rest/v1/generations/:id/appearances
```

---

## Typography & Fonts

`svgdiagram.ai` bundles four curated font families. Every diagram can render in any of these fonts:

| Font ID | Font Name | Characteristic |
| :--- | :--- | :--- |
| `inter` | Inter | **Default**. Ultra-clean, modern tech & UI typography. |
| `source-sans-3` | Source Sans 3 | Highly legible, classic documentation font. |
| `archivo` | Archivo | Grotesk feel with bold structural punch. |
| `barlow-condensed` | Barlow Condensed | Compact typography ideal for dense, multi-step diagrams. |

### Font Locking

Set `"fontLocked": true` in a re-render request to lock your chosen font. When locked, the font is preserved even if you apply built-in visual styles later.

---

## Color Palettes & Accent Roles

Diagrams use semantic color roles derived from full-strength accent palettes:

- **Indigo** (`#6366f1`): Strategy, primary flow
- **Violet** (`#8b5cf6`): Innovation, launch
- **Emerald** (`#10b981`): Success, growth, positive state
- **Amber** (`#f59e0b`): Warning, attention
- **Cyan** (`#06b6d4`): Data, monitoring, analytics
- **Slate** (`#64748b`): Infrastructure, neutral hardware

Pass a custom palette of hex codes during re-render:

```json
{
  "colors": {
    "source": "custom",
    "palette": ["#6366f1", "#10b981", "#06b6d4"]
  }
}
```

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