skills.rest
praveenperera
praveenpereraCOMMUNITY
Explore all skills by this author →
Website𝕏@praveenpereraGitHub

svg-diagram

Converts JSX/React components into SVG diagrams and OG images.

4|1|Updated Apr 19, 2016
Search Tags:#graphics#react#svg#tailwind#jsx#og-image#satori
One-click install
npx skills add https://github.com/praveenperera/dotfiles --skill svg-diagram-praveenperera
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-diagram
Source: https://github.com/praveenperera/dotfiles/tree/main/claude/skills/svg-diagram
Command: npx skills add https://github.com/praveenperera/dotfiles --skill svg-diagram-praveenperera

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts JSX components into SVG diagrams and OG images for dynamic visuals.

Core Features & Use Cases

  • JSX-to-SVG rendering with Satori
  • Tailwind-inspired styling via tw prop
  • OG/Image generation with light/dark themes
  • Batch diagram generation for multiple sizes

Quick Start

Create an SVG diagram from a JSX/React component using Satori.

Frequently Asked Questions about svg-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert React components to SVG diagrams for dynamic visuals?▼

To convert React components to SVG diagrams, use Satori to render JSX into SVG. This enables dynamic visual generation for social previews, diagrams, and graphics directly from your React code. Requires fonts and configurable output sizes.

Can I generate dynamic OG images from JSX components?▼

Yes, you can generate dynamic OG images from JSX components using Satori. The approach supports light and dark themes, configurable width and height output sizes, and Tailwind-inspired styling via the tw prop.

Does Satori support Tailwind styling for SVG generation?▼

Satori supports Tailwind-inspired styling through the tw prop when rendering JSX to SVG. This allows you to apply familiar utility classes to style your dynamic SVG diagrams and social images.

What's the best way to batch generate multiple SVG diagram sizes from React?▼

Batch diagram generation for multiple sizes is supported by rendering JSX components with Satori. You can configure output dimensions width and height, apply light or dark themes, and produce multiple SVG variations from a single React component.

Do I need custom fonts to render JSX to SVG with Satori?▼

Yes, custom fonts are required when rendering JSX to SVG with Satori. The rendering engine needs font data to accurately generate SVG diagrams and OG images from your React components.

When should I use JSX-to-SVG rendering instead of static image formats?▼

Use JSX-to-SVG rendering when you need to automate dynamic social previews, diagrams, and graphics from React components. It is ideal for generating visuals that require configurable output sizes, themes, and data-driven updates.

Related Skills

Explore More Software Engineering Skills→
stratagastrataga

nextjs-og-image-css-limitations

Replace inline-block with display:flex and alignSelf:flex-start in Next.js OG images.

Community
Basic
2025Emma2025Emma
22.7k

snapdom

Convert HTML elements into SVG, PNG, JPG, or WebP images.

Community
Basic
Gentleman-ProgrammingGentleman-Programming
618

tailwind-4

Automate Tailwind CSS 4 adoption with cn(), theme variables, and safe arbitrary values.

Official
Basic
NagyViktNagyVikt
2

satori

Convert JSX-based HTML and CSS into SVG or PNG images for Open Graph metadata.

Community
Intermediate