Can I export these diagrams to other formats?

The skill generates high-quality SVG files natively. For rasterized versions like WebP or PNG, it is recommended to combine this skill with the svg-to-webp plugin.

Which AI models are supported?

It is optimized for Google Gemini 3 Flash via OpenRouter for high-speed and accurate rendering, but it can be configured to use other compatible OpenRouter models.

Is it suitable for dark mode documentation?

Yes, it includes built-in theme support. You can toggle between 'dark' and 'light' themes to ensure your diagrams look perfect in any environment.

Does this skill require an API key?

Yes, you must have an OPENROUTER_API_KEY environment variable configured to allow the skill to communicate with the model that generates the SVG code.

How does this differ from Mermaid?

Mermaid uses a strict syntax for predefined chart types; this skill uses AI to draw free-form SVG elements, allowing for custom layouts, complex branding, and creative positioning that Mermaid cannot handle.

SVG Diagram Creator

Name: SVG Diagram Creator
Author: haboshi

byhaboshi

0•

设计工具

Generates custom, free-form SVG diagrams and infographics from text prompts, surpassing the layout constraints of traditional tools like Mermaid.

The SVG Diagram Creator is a powerful skill designed for developers and technical writers who need high-quality, custom-styled visual documentation. Unlike standard graphing libraries that follow rigid syntaxes, this skill leverages advanced AI models like Gemini 3 Flash to interpret natural language and generate intricate vector graphics with precise placement. Whether you need a complex multi-layered architecture map, a branded infographic, or a specialized flow with custom decorations, this tool provides the flexibility to create production-ready SVGs that align perfectly with your design requirements.

主要功能

01Advanced layout control beyond the capabilities of Mermaid.js.

02AI-powered free-form SVG generation from natural language prompts.

030 GitHub stars

04Fully customizable canvas dimensions (viewBox) for high-resolution outputs.

05Support for Dark and Light themes to match various documentation styles.

06Integrated support for OpenRouter models for high-speed visual reasoning.

使用场景

01Generating complex cloud architecture diagrams that require non-linear component placement.

02Creating visually engaging infographics for technical blog posts or product documentation.

03Designing branded technical illustrations that require specific color palettes and font styles.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill