# Svg Diagram

> |

- **Type:** Skill
- **Install:** `agentstack add skill-jesamkim-oh-my-skills-svg-diagram`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jesamkim](https://agentstack.voostack.com/s/jesamkim)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jesamkim](https://github.com/jesamkim)
- **Source:** https://github.com/jesamkim/oh-my-skills/tree/main/my-skills/svg-diagram

## Install

```sh
agentstack add skill-jesamkim-oh-my-skills-svg-diagram
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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

```xml

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.

```xml

  
  

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
```xml
font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif"

```

**dark preset (legacy)**: monospace
```xml
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
```xml

  

  
  
  
  
  
  

```

### Architecture Diagram Template (vercel-stripe default)

```xml

  
    
  
  

  
  
  
  
  
  

```

**Dark legacy template** (explicit request only):
```xml

  
  

```

### Pipeline Flow Template
```xml

  
  
  Label
  Detail

  
  →

  

```

### Pill/Badge Template
```xml

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:
```bash
docs/banner.svg
docs/architecture.svg
docs/pipeline.svg
```

Embed in README.md:
```markdown

  

```

## Source & license

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

- **Author:** [jesamkim](https://github.com/jesamkim)
- **Source:** [jesamkim/oh-my-skills](https://github.com/jesamkim/oh-my-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jesamkim-oh-my-skills-svg-diagram
- Seller: https://agentstack.voostack.com/s/jesamkim
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.