---
name: tech-diagram
description: "Generate technical architecture diagrams, pipeline flows, layer/stack diagrams, and system illustrations as standalone HTML files. Uses a dark-mode design system with embedded CSS and inline SVG. Use when the user needs architecture diagrams, system illustrations, flow charts, or technical visualizations."
license: MIT
origin: custom
author: Rebecca Rae Barton
author_url: https://github.com/thatrebeccarae
metadata:
  version: 1.0.0
  category: creative
  domain: design
  updated: 2026-03-13
  tested: 2026-03-17
  tested_with: "Claude Code v2.1"
---

# Technical Diagram Generator

Generate technical architecture diagrams and system illustrations as standalone HTML files with embedded CSS + inline SVG. No external dependencies.

## Install

```bash
git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/tech-diagram ~/.claude/skills/
```

## Core Capabilities

- Pipeline flow diagrams (data pipelines, CI/CD, ETL)
- Layer/stack diagrams (tech stack, OSI model, infrastructure)
- Component diagrams (microservices, system architecture)
- Before/after split comparisons
- Timeline diagrams (roadmaps, migration phases)
- Metric callout rows (KPI summaries)

## Design System

### Color Tokens

```css
:root {
  /* Dark mode (default canvas) */
  --bg-deep: #0d1117;
  --bg-surface: #161b22;
  --bg-elevated: #21262d;
  --border-subtle: rgba(240, 246, 252, 0.1);
  --text-bright: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;

  /* Accent palette */
  --accent-blue: #58a6ff;
  --accent-green: #3fb950;
  --accent-purple: #bc8cff;
  --accent-orange: #d29922;
  --accent-red: #f85149;
  --accent-cyan: #39d2c0;
  --accent-pink: #f778ba;

  /* Light mode (optional, for embedded diagrams) */
  --bg-light: #ffffff;
  --bg-light-surface: #f6f8fa;
  --text-light-primary: #1f2328;
  --text-light-secondary: #656d76;
}
```

### Color Rules

- Dark mode is default for all diagrams
- Each pipeline stage or layer gets a distinct accent color
- Use `--text-secondary` for labels and annotations
- Use `--border-subtle` for connecting lines and borders
- Semantic colors: green = healthy/success, red = error/alert, orange = warning

### Typography

| Role | Font | Weight | Size |
|------|------|--------|------|
| Diagram title | system-ui | 600 | 28-32px |
| Section/stage label | system-ui | 600 | 16-18px |
| Description text | system-ui | 400 | 13-14px |
| Annotation | monospace | 400 | 12px |
| Metric value | monospace | 700 | 36-48px |

### Canvas

```
Width:  1200px (default, responsive down to 800px)
Height: auto (content-driven)
Padding: 48px
```

## Component Library

### Pipeline Flow

Horizontal or vertical sequence of stages with connecting arrows. Each stage has an icon area, label, and description.

### Layer/Stack Diagram

Vertical stack of labeled layers with optional descriptions. Top = highest abstraction, bottom = lowest.

### Component Diagram

Grid or freeform layout of service boxes with connection lines. Each component shows name, tech, and status.

### Before/After Split

Side-by-side comparison with a vertical divider. Left = before state, right = after state.

### Timeline

Horizontal or vertical sequence of milestones with dates, descriptions, and status indicators.

### Metric Callout Row

Horizontal row of KPI cards with large numbers, labels, and optional trend indicators.

## Key Principles

1. **One concept per diagram.** If it needs two diagrams, make two files.
2. **Labels on everything.** Every box, arrow, and region should be labeled.
3. **Consistent spacing.** Use CSS grid or flexbox, not absolute positioning.
4. **No external deps.** Everything inline — CSS in `<style>`, icons as inline SVG.
5. **Print-friendly.** Include `@media print` with light background override.

## Anti-Patterns

- No raster images (PNG/JPG) — use inline SVG for all icons
- No external CSS/JS — everything embedded
- No gradients as primary fill — use flat colors with subtle borders
- No more than 8 items in a single row — wrap or use grid
- No decorative elements that do not convey information

## File Conventions

- **Filename:** `{project}-{diagram-type}.html` (e.g., `pipeline-architecture.html`)
- **Single file:** All CSS inline in `<style>`, all SVG inline
- **Responsive:** Works at 800-1400px width range

For complete HTML/CSS patterns and full examples, see [REFERENCE.md](REFERENCE.md).