Technical Svg Diagrams

This one gives Claude the ability to generate clean, consistent SVG diagrams for architecture, flow, and component visualizations. It comes with predefined patterns, a color palette, and templates to keep things standardized across your technical documentation. The workflow is straightforward: pick your diagram type, reference the pattern library, generate the SVG, and optionally export to PNG or WebP. At 115 installs, it seems to have found an audience. Honestly, this is the kind of thing that shines when you need repeatable diagram output without firing up a separate tool or hand-coding SVG primitives every time.

skills.sh installs: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add somtougeh/dotfiles --skill technical-svg-diagrams --agent claude-code

Installs into .claude/skills of the current project.

Files

Generate technical SVG diagrams with consistent styling for blog posts and documentation. Use an accessible text description alongside the SVG, or a title/description and accessible name for meaningful inline diagrams. Do not rely on color alone. All diagrams use a unified visual language: grid backgrounds, monospace fonts, muted colors with semantic accents, and clean geometric shapes.

<quick_start>

Identify diagram type needed (architecture, flow, or component)
Read references/svg-patterns.md for templates and color palette
Generate SVG using the established patterns
Save to target directory with descriptive filename
Export only when requested, using an available browser screenshot tool or cairosvg </quick_start>

<design_system>