Svg Diagram

SVG Diagram Generator

Generate clean, professional SVG diagrams and banners with precise text positioning and zero element overlap.

Core Principles

1. Canvas First

Always start with a fixed viewBox. Common sizes:

• Banner: viewBox="0 0 800 300" (wide, shallow)
• Architecture: viewBox="0 0 800 520" (wide, tall)
• Flowchart: viewBox="0 0 600 800" (narrow, very tall)
• Comparison: viewBox="0 0 800 400" (wide, medium)

2. Anti-Overlap Rules (CRITICAL)

These rules prevent the #1 problem in AI-generated SVGs:

RULE 1: Text Anchoring
  - Always use text-anchor="middle" with x at center of container
  - For left-aligned text, use text-anchor="start" with explicit x offset

RULE 2: Vertical Spacing
  - Minimum 40px between box elements
  - Minimum 15px between text lines (font-size 12-13)
  - Minimum 12px between text lines (font-size 9-10)
  - Text y-position = box_y + (box_height / 2) + (font_size / 3)

RULE 3: Horizontal Spacing
  - Minimum 10px gap between adjacent boxes
  - Arrow/connector labels centered between source and target
  - Never place text outside viewBox bounds

RULE 4: Container Padding
  - Text inside boxes: minimum 8px padding from all edges
  - Box width = text_width + 20px minimum
  - If text might overflow, use font-size 9 or truncate

3. Style Presets

Two presets available. DEFAULT: vercel-stripe (light) from 2026-04-30.

Preset A: vercel-stripe (LIGHT, DEFAULT)

Inspired by Vercel blog + Stripe docs. Use this for blog posts, docs, architecture diagrams, product content.

Reference SVG: vercel-stripe-reference.svg (same directory). READ THIS FIRST before generating — it demonstrates the exact conventions.

fill="#FFFFFF"

  
  

  
  

  
  

Stripe purple:   #635BFF (primary accent)
Cyan:            #00D9FF (hero-inside label)
Teal:            #00B4A6 (secondary tool accent)
Green:           #10B981 (success, output)
Blue (cool):     #3B4FCC (data layer label)

Card border:     #E5E5EA (1px)
Data border:     #D6DFF5 (1px)
Divider:         #EAEAEA

Primary text:    #0A0A0A
Secondary text:  #6B6B75
Tertiary text:   #B0B0B8

Flow arrow:      #8C8C95, stroke-width 1.5, solid
Data-ref arrow:  #B8C5E8, stroke-width 1.2, dashed (4 4)
Return arrow:    #D6DFF5, stroke-width 1.5
Success arrow:   #10B981, stroke-width 1.5

  

  
  
  
  

rx="12"  outer containers, hero cards
rx="10"  default cards
rx="8"   inner chips inside data layer

font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif"

Card types:

| Type | Fill | Border | Use | |-----------------|-------------------|-------------------|--------------------------------------| | Default | url(#cardBg) | #E5E5EA 1px | Input/output, generic nodes | | Hero (black) | url(#accentBlack) | #000 1px | Main orchestrator — 1 per diagram | | Tool card | url(#cardBg) + 4px left accent bar | #E5E5EA 1px | External tools, APIs | | Data card | url(#dataBg) | #D6DFF5 1px | Data layer, storage | | Inner chip | #FFFFFF | #D6DFF5 1px | Sub-items inside data layer |

Typography:

• Title: 22px, weight 700, letter-spacing -0.5, #0A0A0A
• Subtitle: 13px, weight 400, #6B6B75
• Category label: 11px, weight 600, letter-spacing 0.3em, UPPERCASE, accent color
• Node title: 14-15px, weight 600, #0A0A0A (or #FFFFFF on hero)
• Description: 12px, weight 400, #6B6B75 (or #A0A0AA on hero)
• Arrow annotation: 10px, weight 500, #6B6B75

Arrow rules:

• Start/end MUST snap to card edge (not center, not inside)
• Use cubic Bezier (C) for smooth curves between diagonal nodes — NOT quadratic
• Numbered flow labels: 1, 2, 3, 4 (or circled variants) near arrow start
• Don't route arrows over card bodies — go around
• Return flows: lighter gray #D6DFF5, optional dashed

Preset B: dark (LEGACY, explicit request only)

Only for conference slides, social thumbnails, or when user explicitly asks for dark.

  
  

Green:   #00d4aa, #00ff88
Blue:    #00a8ff, #00ccff
Orange:  #ff9900, #ffaa00
Red:     #ff4444
Purple:  #aa88ff, #ff44ff
Yellow:  #ffdd44
Gray:    #888, #555, #333

4. Typography

vercel-stripe preset (default): sans-serif only

font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif"

dark preset (legacy): monospace

font-family="monospace" font-size="18-42" fill="white" font-weight="bold"

Never use serif fonts in technical diagrams. For Korean text use NanumSquareRound, -apple-system, sans-serif to avoid cairosvg tofu.

Templates

Hero Banner Template

Architecture Diagram Template (vercel-stripe default)

Dark legacy template (explicit request only):

Pipeline Flow Template

  
  
  Label
  Detail

  
  →

  

Pill/Badge Template

Label

Checklist Before Output

Before writing the final SVG, verify:

• [ ] All text elements have explicit text-anchor and x, y coordinates
• [ ] No two elements share the same y-range at the same x-range
• [ ] All text fits within its container (check string length × ~6px per char at font-size 10)
• [ ] viewBox dimensions accommodate all elements with 20px+ margin
• [ ] Colors meet WCAG AA on white background (vercel-stripe default). Secondary text #6B6B75 passes at 12px+
• [ ] Font sizes: titles ≥18, labels ≥10, box text ≥8
• [ ] Arrow connectors are between steps, not overlapping content
• [ ] rx (border radius) is consistent: 12 for main bg, 8 for step boxes, 6 for pipeline boxes, 4 for pills

Example Usage

"README에 넣을 프로젝트 히어로 배너 만들어줘" → Hero Banner Template + project name, tech stack, stats

"시스템 아키텍처 다이어그램 그려줘" → Architecture Diagram Template + components, data flow

"CI/CD 파이프라인 시각화해줘" → Pipeline Flow Template + stages, tools

"비교 차트 만들어줘 (A vs B)" → Side-by-side boxes with comparison metrics

Output

Always save SVG files to the docs/ directory:

docs/banner.svg
docs/architecture.svg
docs/pipeline.svg

Embed in README.md:

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jesamkim
• Source: jesamkim/oh-my-skills
• License: MIT

Install and usage instructions live in the source repository linked above.