Are the diagrams responsive?

The SVGs use proper viewBox attributes, allowing them to scale cleanly to any size while maintaining perfectly sharp text and lines.

Do I need external tools like Mermaid.js or Draw.io?

No, this skill generates raw SVG code directly. It does not require any external dependencies, libraries, or third-party web services to function.

How do I convert the generated SVG to a PNG for my presentation?

The skill automatically creates a companion HTML file. When you open this file in a browser, it provides simple buttons to export your diagram as a high-quality PNG.

How does the skill handle long text or complex labels?

It uses pre-calculated character widths and SVG tspans to manage multi-line text and ensure that labels never overlap or bleed out of their containers.

Can I customize the colors and layout of the diagrams?

Yes, you can provide specific descriptions for layout and color schemes, or let the skill use its built-in judgment to create a professional, accessible design.

SVG Diagram Generator

Name: SVG Diagram Generator
Author: tielur

bytielur

•

Herramientas de Diseño

Generates professional technical diagrams, system architectures, and flowcharts as SVG files with built-in PNG export functionality.

This skill enables Claude to design and implement high-quality visual documentation directly within your development workflow. It produces clean, standalone SVG files and companion HTML export wrappers that allow for easy conversion to PNG at multiple scales. Designed with a 'Pure SVG' philosophy, it ensures crisp text rendering and professional layouts for system overviews, layered illustrations, and complex process flows without requiring external dependencies, build tools, or third-party charting libraries.

Características Principales

01Follows accessibility best practices with structured title and description tags

02Implements intelligent text-width calculation to prevent label clipping and overlaps

03Generates standalone, high-resolution SVG files for technical documentation

041 GitHub stars

05Includes an HTML export wrapper for 1x and 2x PNG downloads

06Produces minimalist, professional designs using purposeful color palettes

Casos de Uso

01Visualizing CI/CD deployment pipelines and software development workflows

02Designing layered infrastructure charts to explain complex cloud service configurations

03Creating system architecture diagrams for README files or technical documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tielur/claude-code-skills svg-diagram

For use in Claude.ai and ChatGPT

Características Principales

01Follows accessibility best practices with structured title and description tags

02Implements intelligent text-width calculation to prevent label clipping and overlaps

03Generates standalone, high-resolution SVG files for technical documentation

041 GitHub stars

05Includes an HTML export wrapper for 1x and 2x PNG downloads

06Produces minimalist, professional designs using purposeful color palettes

Casos de Uso

01Visualizing CI/CD deployment pipelines and software development workflows

02Designing layered infrastructure charts to explain complex cloud service configurations

03Creating system architecture diagrams for README files or technical documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tielur/claude-code-skills svg-diagram

For use in Claude.ai and ChatGPT