Skills
.Work. You
Rest

inline-svg-architecture-diagrams

Community

Generate dynamic SVG architecture diagrams.

Software Engineering#architecture#visualization#animation#svg#diagrams#css variables
AuthorPeleke
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of production-quality, inline SVG architecture diagrams directly within web pages, eliminating the need for external image files and build steps.

Core Features & Use Cases

  • Inline SVG Generation: Creates diagrams that are part of the HTML, allowing for CSS styling and responsiveness.
  • Theme-Aware Styling: Diagrams automatically adapt to light/dark mode using CSS variables.
  • Animated Elements: Supports animated flow lines and feedback loops to visualize data movement.
  • Use Case: When documenting a complex software system, use this Skill to generate an interactive architecture diagram that visually represents data flow and component interactions, ensuring it seamlessly matches the website's design system.

Quick Start

Generate an SVG architecture diagram using the provided layer and connection data.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: inline-svg-architecture-diagrams
Download link: https://github.com/Peleke/hunter/archive/main.zip#inline-svg-architecture-diagrams

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.