What model does this skill use for generation?

By default, it uses Google's Gemini 3 Flash via OpenRouter, but you can specify any compatible OpenRouter model using the --model flag.

How does this differ from using Mermaid?

Unlike Mermaid's rigid, syntax-driven layouts, this skill uses LLMs to generate raw SVG code, allowing for free-form placement, custom styling, and decorative elements that Mermaid cannot produce.

Are there any prerequisites for using this skill?

You will need Node.js 18+ and a valid OPENROUTER_API_KEY configured in your environment variables.

Can I customize the theme and size of the diagrams?

Yes, the skill supports --theme (dark/light), --width, and --height flags to ensure the output matches your documentation style and resolution needs.

SVG Diagram Creator

Name: SVG Diagram Creator
Author: haboshi

byhaboshi

0•

디자인 도구

Generates custom SVG diagrams and infographics with free-form layouts that go beyond the constraints of Mermaid syntax.

The SVG Diagram Creator skill empowers Claude to design and generate high-quality, bespoke SVG visualizations using advanced LLMs. While standard tools like Mermaid are restricted to rigid structures, this skill allows for absolute positioning, custom branding, and decorative elements. It is the ideal solution for developers and architects who need to produce professional system architecture maps, complex infographics, or UI flowcharts that require specific design aesthetics and flexible layouts directly within their workflow.

주요 기능

01Free-form SVG element positioning for limitless layout possibilities

020 GitHub stars

03Support for dark and light visual themes to match project documentation

04Seamless command-line integration for rapid visual prototyping

05Customizable canvas dimensions and viewBox settings for high-resolution output

06Powered by OpenRouter LLMs for intelligent, context-aware diagram generation

사용 사례

01Designing technical infographics for documentation that require branding and decorative elements

02Visualizing complex non-linear workflows that exceed the capabilities of standard diagramming DSLs

03Creating bespoke cloud architecture diagrams with custom icons and specific spatial layouts

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

주요 기능

01Free-form SVG element positioning for limitless layout possibilities

020 GitHub stars

03Support for dark and light visual themes to match project documentation

04Seamless command-line integration for rapid visual prototyping

05Customizable canvas dimensions and viewBox settings for high-resolution output

06Powered by OpenRouter LLMs for intelligent, context-aware diagram generation

사용 사례

01Designing technical infographics for documentation that require branding and decorative elements

02Visualizing complex non-linear workflows that exceed the capabilities of standard diagramming DSLs

03Creating bespoke cloud architecture diagrams with custom icons and specific spatial layouts

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