Styling & Re-rendering | svgdiagram.ai Docs

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

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:

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:

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