Generate custom SVG diagrams from natural language prompts via OpenRouter.
npx skills add https://github.com/haboshi/claude-code-skills --skill svg-diagram-haboshi
Please help me install this Agent Skill. Skill: svg-diagram Source: https://github.com/haboshi/claude-code-skills/tree/main/svg-diagram Command: npx skills add https://github.com/haboshi/claude-code-skills --skill svg-diagram-haboshi
This Skill allows you to generate custom-designed SVG diagrams using LLMs, overcoming the limitations of tools like Mermaid for free-form layouts and complex infographics.
Use the svg-diagram skill to generate a 3-tier architecture diagram with the prompt '3層アーキテクチャ図：フロントエンド、API、DB' and save it to 'diagram.svg'.
High-intent search queries and answers about installing and using this skill.
To generate custom SVG diagrams using LLMs, you provide a natural language prompt describing your desired layout. The Skill leverages OpenRouter models to produce free-form infographics and architecture charts, allowing specific dimension and theme customization.
Creating infographics beyond Mermaid's capabilities requires an LLM-powered approach for free-form element placement. This Skill uses natural language prompts to generate custom SVG designs, supporting complex visual layouts that standard charting tools cannot render.
Yes, you need an OpenRouter API key to generate SVG diagrams. You must configure the OPENROUTER_API_KEY environment variable to authenticate requests, select your preferred LLM model, and successfully execute the natural language to SVG generation process.
Yes, you can customize the theme and dimensions of generated SVG diagrams. The Skill supports dark and light themes, custom image sizes, and specific LLM model selection, enabling tailored infographic outputs that match your project's branding and layout requirements.
LLM-powered SVG generation handles complex business process visualizations by interpreting natural language prompts to place elements freely. Unlike rigid charting syntax, it produces custom infographics with specific branding colors and non-standard architectural layouts directly as SVG files.
omerspacConfigure OpenAI ChatKit in a Next.js frontend with authentication.
Cuki2910Convert SVG source code into PNG images for visual feedback.
47thtechcornerRender Mermaid diagram syntax into SVG and high-resolution PNG assets.
hmzainjamilPlan infographic layouts and content structure with visual design specifications.
