home / Image & Video / Tech Diagram Skill by @thatrebeccarae

Tech Diagram Skill by @thatrebeccarae

FREE

github stars★ 187updatedMar 2026repo@thatrebeccarae

$git clone https://github.com/thatrebeccarae/claude-marketing

The skill is the skills/tech-diagram folder inside that repository. Copy it into the folder your agent loads skills from; check your agent's documentation for where that is.

about Tech Diagram Skill by @thatrebeccarae

Generate technical architecture diagrams, pipeline flows, layer/stack diagrams, and system illustrations as standalone HTML files.

our take

Generates technical diagrams such as architecture, pipeline flows and layer stacks as standalone HTML files, using a dark design system with embedded CSS and inline SVG.

when to use it

You want a polished diagram in a single HTML file
You need a consistent look across several diagrams
You are illustrating a system for docs or a presentation

before you install

Output is HTML and SVG, so it is not editable in drawing tools
Dark styling may need adjusting for print or light-themed sites

what's inside

The original SKILL.md is organised into these sections:

Install
Core Capabilities
Design System
Color Tokens
Color Rules
Typography
Canvas
Component Library
Pipeline Flow
Layer/Stack Diagram
Component Diagram
Before/After Split

source and license

Written and maintained by @thatrebeccarae. It is published under the MIT license, which allows reuse with attribution. SkillDirectory does not claim authorship: this page adds our own review and links back to the original, and the skill's text belongs to its author.

View the full SKILL.md on GitHub ↗

Read the opening of the original SKILL.md

# 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;
…

Excerpt only, quoted from the author's repository. Open the repository for the complete file.

↓ download .zip