---
name: annotated-diagram
description: Create Backlinko-style annotated SVG infographics and diagrams for blog posts.
---

# Skill: Annotated Diagram Graphics

Create educational annotated diagrams that break down concepts, processes, or structures visually. These are "Backlinko-style" infographics commonly used for blog posts, tutorials, and educational content.

## When to Use

- Explaining blog post structures or templates
- Breaking down processes step-by-step
- Showing anatomy of interfaces, emails, landing pages
- Illustrating frameworks or methodologies
- Creating visual guides for best practices

## Design Principles

### Core Layout

```
┌─────────────────────────────────────────────────────────┐
│                      MAIN TITLE                         │
├─────────────────────────────┬───────────────────────────┤
│                             │                           │
│    MAIN CONTENT AREA        │    ANNOTATION SIDEBAR     │
│    (Example/Mock-up)        │    (Labels + Bullets)     │
│                             │                           │
│    ●────────────────────────┼───● [LABEL]              │
│                             │      • Point 1            │
│                             │      • Point 2            │
│                             │                           │
└─────────────────────────────┴───────────────────────────┘
```

### Visual Hierarchy

1. **Main Title** — Top center, largest text, describes what diagram shows
2. **Content Area** — Left side (60-70%), shows the actual example
3. **Annotation Sidebar** — Right side (30-40%), explains each section
4. **Connector Lines** — Link content sections to their annotations
5. **Color-Coded Labels** — Each section gets a distinct color

## Color System

Use a consistent 5-6 color palette for section labels:

```svg
<!-- Recommended Color Palette -->
<style>
  .label-green  { fill: #10B981; }  /* Title, Primary */
  .label-orange { fill: #F59E0B; }  /* Intro, Hook */
  .label-purple { fill: #8B5CF6; }  /* Subheadings, Body */
  .label-blue   { fill: #3B82F6; }  /* Actions, Steps */
  .label-red    { fill: #EF4444; }  /* Conclusion, CTA */
  .label-teal   { fill: #14B8A6; }  /* Optional extras */
</style>
```

### Typography

```svg
<!-- Font Stack -->
<style>
  .title      { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 700; }
  .label      { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }
  .bullet     { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; }
  .mock-title { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; }
  .mock-text  { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; }
</style>
```

## SVG Structure Template

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
  <defs>
    <!-- Styles -->
    <style>
      .bg { fill: #FAFAFA; }
      .card { fill: #FFFFFF; stroke: #E5E7EB; stroke-width: 1; }
      .title { font-family: Inter, sans-serif; font-size: 28px; font-weight: 700; fill: #1F2937; }
      .mock-line { fill: #E5E7EB; rx: 4; }
      .connector { stroke: #9CA3AF; stroke-width: 2; fill: none; }
      .dot { r: 6; }
    </style>
  </defs>

  <!-- Background -->
  <rect class="bg" width="100%" height="100%"/>

  <!-- Main Title -->
  <text class="title" x="400" y="50" text-anchor="middle">The Classic List Post</text>

  <!-- Browser Window Mock -->
  <g transform="translate(40, 80)">
    <!-- Window Chrome -->
    <rect class="card" width="450" height="800" rx="8"/>
    <circle fill="#E5E7EB" cx="20" cy="15" r="5"/>
    <circle fill="#E5E7EB" cx="35" cy="15" r="5"/>
    <circle fill="#E5E7EB" cx="50" cy="15" r="5"/>

    <!-- Content Inside -->
    <g transform="translate(25, 50)">
      <!-- Mock content here -->
    </g>
  </g>

  <!-- Annotations Sidebar -->
  <g transform="translate(520, 100)">
    <!-- Annotation blocks here -->
  </g>

  <!-- Connector Lines -->
  <g class="connectors">
    <!-- Lines connecting content to annotations -->
  </g>
</svg>
```

## Component Library

### Browser Window Frame

```svg
<g id="browser-frame">
  <rect fill="#FFFFFF" stroke="#E5E7EB" width="450" height="700" rx="8"/>
  <!-- Window buttons -->
  <circle fill="#E5E7EB" cx="20" cy="15" r="5"/>
  <circle fill="#E5E7EB" cx="35" cy="15" r="5"/>
  <circle fill="#E5E7EB" cx="50" cy="15" r="5"/>
  <!-- URL bar (optional) -->
  <rect fill="#F3F4F6" x="60" y="8" width="300" height="14" rx="7"/>
</g>
```

### Mock Text Lines (Placeholder Content)

```svg
<!-- Full width line -->
<rect fill="#E5E7EB" x="0" y="0" width="380" height="10" rx="5"/>

<!-- Partial width lines (vary lengths for realism) -->
<rect fill="#E5E7EB" x="0" y="0" width="350" height="10" rx="5"/>
<rect fill="#E5E7EB" x="0" y="16" width="300" height="10" rx="5"/>
<rect fill="#E5E7EB" x="0" y="32" width="280" height="10" rx="5"/>
<rect fill="#E5E7EB" x="0" y="48" width="320" height="10" rx="5"/>
```

### Highlighted Text (Emphasis)

```svg
<!-- Yellow highlight behind text -->
<rect fill="#FEF3C7" x="0" y="0" width="200" height="20" rx="2"/>
<text fill="#1F2937" x="5" y="15" font-size="14">Highlighted text here</text>

<!-- Green highlight -->
<rect fill="#D1FAE5" x="0" y="0" width="180" height="20" rx="2"/>

<!-- Blue highlight -->
<rect fill="#DBEAFE" x="0" y="0" width="220" height="20" rx="2"/>
```

### Annotation Label Badge

```svg
<!-- Green label -->
<g id="label-title">
  <rect fill="#10B981" width="60" height="24" rx="4"/>
  <text fill="#FFFFFF" x="30" y="16" text-anchor="middle"
        font-size="11" font-weight="600" letter-spacing="0.5">TITLE</text>
</g>

<!-- Orange label -->
<g id="label-intro">
  <rect fill="#F59E0B" width="60" height="24" rx="4"/>
  <text fill="#FFFFFF" x="30" y="16" text-anchor="middle"
        font-size="11" font-weight="600" letter-spacing="0.5">INTRO</text>
</g>
```

### Annotation Block with Bullets

```svg
<g id="annotation-block">
  <!-- Connector dot -->
  <circle fill="#10B981" cx="0" cy="12" r="6"/>

  <!-- Connector line (horizontal then turns) -->
  <path d="M 6 12 H 30 V 0" stroke="#D1D5DB" stroke-width="2" fill="none"/>

  <!-- Label badge -->
  <rect fill="#10B981" x="35" y="0" width="60" height="24" rx="4"/>
  <text fill="#FFFFFF" x="65" y="16" text-anchor="middle" font-size="11" font-weight="600">TITLE</text>

  <!-- Bullet points -->
  <g transform="translate(35, 35)">
    <circle fill="#10B981" cx="5" cy="8" r="4"/>
    <text fill="#4B5563" x="15" y="12" font-size="13">A Specific Benefit</text>

    <circle fill="#10B981" cx="5" cy="30" r="4"/>
    <text fill="#4B5563" x="15" y="34" font-size="13">The Number Of Items</text>

    <circle fill="#10B981" cx="5" cy="52" r="4"/>
    <text fill="#4B5563" x="15" y="56" font-size="13">A Short Timeframe</text>
  </g>
</g>
```

### Connector Line Styles

```svg
<!-- Straight horizontal with dot endpoints -->
<g class="connector">
  <circle fill="#10B981" cx="450" cy="100" r="6"/>
  <line x1="456" y1="100" x2="520" y2="100" stroke="#D1D5DB" stroke-width="2"/>
</g>

<!-- Angled connector (content lower than annotation) -->
<path d="M 450 200 H 480 V 150 H 520" stroke="#D1D5DB" stroke-width="2" fill="none"/>

<!-- Curved connector -->
<path d="M 450 300 Q 485 300 485 270 Q 485 240 520 240" stroke="#D1D5DB" stroke-width="2" fill="none"/>
```

### Avatar/Author Placeholder

```svg
<g id="avatar">
  <circle fill="#E5E7EB" cx="20" cy="20" r="20"/>
  <path fill="#9CA3AF" d="M20 22c-4 0-7-3-7-7s3-7 7-7 7 3 7 7-3 7-7 7zm0 2c5 0 14 2.5 14 7.5V35H6v-3.5c0-5 9-7.5 14-7.5z"/>
</g>
```

### Image Placeholder

```svg
<g id="image-placeholder">
  <rect fill="#E5E7EB" width="380" height="150" rx="4"/>
  <!-- Optional: mountain/image icon -->
  <path fill="#9CA3AF" transform="translate(170, 55)"
        d="M20 40H0l10-15 5 7.5 10-15 15 22.5H20z"/>
</g>
```

## Building Process

### Step 1: Plan the Structure

List all sections you'll annotate:
```
1. Title → Green
2. Intro/Hook → Orange
3. Subheadings → Purple
4. Action Items/Steps → Blue
5. Conclusion/CTA → Red
```

### Step 2: Create the Mock Content

Build the left-side example with:
- Browser window frame
- Mock title with highlights
- Placeholder image
- Text lines of varying lengths
- Subheadings
- Bullet points
- Conclusion section

### Step 3: Add Annotations

For each section, create:
- Colored dot at the content
- Connector line to sidebar
- Label badge
- 2-4 bullet points explaining that section

### Step 4: Align and Space

- Keep consistent vertical spacing (80-120px between annotation blocks)
- Align connector dots with their content sections
- Ensure labels don't overlap
- Balance whitespace

## Dimensions Guide

| Use Case | Width | Height | Aspect |
|----------|-------|--------|--------|
| Blog post (full width) | 800px | 1000-1400px | ~1:1.5 |
| Blog post (content width) | 700px | 900-1200px | ~1:1.5 |
| Social share | 1200px | 628px | 1.91:1 |
| Pinterest | 735px | 1102px | 2:3 |

## Export Formats

### SVG (Recommended)
- Scalable, small file size
- Editable text
- Best for web

### PNG
- Export at 2x for retina
- Use for social sharing
- Transparent or white background

### WebP
- Smaller than PNG
- Good browser support
- Use for blog posts

## Example: Blog Post Structure

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1100">
  <style>
    .bg { fill: #FAFAFA; }
    .window { fill: #FFFFFF; stroke: #E5E7EB; }
    .text-title { font: 700 28px Inter, sans-serif; fill: #1F2937; }
    .text-mock { font: 700 20px Inter, sans-serif; fill: #1F2937; }
    .text-body { font: 400 14px Inter, sans-serif; fill: #4B5563; }
    .text-label { font: 600 11px Inter, sans-serif; fill: #FFFFFF; letter-spacing: 0.5px; }
    .text-bullet { font: 500 13px Inter, sans-serif; fill: #4B5563; }
    .line { fill: #E5E7EB; }
    .highlight-yellow { fill: #FEF3C7; }
    .highlight-green { fill: #D1FAE5; }
    .connector { stroke: #D1D5DB; stroke-width: 2; fill: none; }
  </style>

  <!-- Background -->
  <rect class="bg" width="100%" height="100%"/>

  <!-- Title -->
  <text class="text-title" x="400" y="45" text-anchor="middle">The Classic List Post</text>

  <!-- Browser Window -->
  <g transform="translate(40, 70)">
    <rect class="window" width="440" height="950" rx="8"/>
    <circle fill="#E5E7EB" cx="18" cy="14" r="4"/>
    <circle fill="#E5E7EB" cx="32" cy="14" r="4"/>
    <circle fill="#E5E7EB" cx="46" cy="14" r="4"/>

    <!-- Mock Title -->
    <g transform="translate(25, 50)">
      <text class="text-mock" y="20">
        <tspan fill="#10B981">17</tspan> Insanely Actionable List
      </text>
      <text class="text-mock" y="46">Building Strategies That Will</text>
      <rect class="highlight-green" x="0" y="56" width="280" height="26" rx="3"/>
      <text class="text-mock" x="5" y="76" fill="#10B981">Generate More Subscribers Today</text>
    </g>

    <!-- Image Placeholder -->
    <rect fill="#E5E7EB" x="25" y="140" width="390" height="120" rx="4"/>

    <!-- Avatar + Intro -->
    <circle fill="#E5E7EB" cx="45" cy="290" r="18"/>
    <text class="text-body" x="25" y="330">I think you'll agree with me when I say:</text>
    <rect class="highlight-yellow" x="25" y="345" width="280" height="20" rx="2"/>
    <text class="text-body" x="30" y="360">It's REALLY hard to grow a YouTube channel.</text>

    <!-- More content sections... -->
  </g>

  <!-- Annotations -->
  <g transform="translate(510, 100)">
    <!-- Title Annotation -->
    <circle fill="#10B981" cx="0" cy="0" r="6"/>
    <line x1="6" y1="0" x2="30" y2="0" class="connector"/>
    <rect fill="#10B981" x="35" y="-12" width="50" height="24" rx="4"/>
    <text class="text-label" x="60" y="4" text-anchor="middle">TITLE</text>
    <g transform="translate(35, 25)">
      <circle fill="#10B981" cx="5" cy="5" r="4"/>
      <text class="text-bullet" x="15" y="9">A Specific Benefit</text>
      <circle fill="#10B981" cx="5" cy="27" r="4"/>
      <text class="text-bullet" x="15" y="31">The Number Of Items</text>
      <circle fill="#10B981" cx="5" cy="49" r="4"/>
      <text class="text-bullet" x="15" y="53">A Short Timeframe</text>
    </g>

    <!-- Add more annotation blocks... -->
  </g>
</svg>
```

## Checklist

Before exporting:

- [ ] Main title is clear and descriptive
- [ ] All sections have consistent annotation style
- [ ] Colors are distinct and accessible
- [ ] Connector lines don't cross or overlap
- [ ] Text is readable (min 11px for labels, 13px for bullets)
- [ ] Adequate whitespace between elements
- [ ] Mock content looks realistic (varied line lengths)
- [ ] Highlighted text uses consistent colors
- [ ] Exported at appropriate resolution
- [ ] File size is optimized (< 500KB for SVG, < 300KB for WebP)

## Tools

**Creating SVGs:**
- Figma (recommended) — Export as SVG
- Adobe Illustrator — Export as SVG
- Sketch — Export as SVG
- Hand-coded — For simple diagrams

**Optimizing:**
- SVGO — Optimize SVG code
- Squoosh — Convert/compress for web

**Fonts:**
- Inter (Google Fonts) — Clean, modern
- System fonts as fallback
