Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
Tyler Clemens avatar

Svg Diagram

  • 1 repo stars
  • Updated March 5, 2026
  • tielur/claude-code-skills

Generate technical diagrams, architecture visuals, and layered illustrations as SVG files with an HTML export wrapper for PNG download.

About

svg-diagram is a Claude Code skill in the AI & Agent Building category. Generate technical diagrams, architecture visuals, and layered illustrations as SVG files with an HTML export wrapper for PNG download.

  • svg-diagram
  • AI & Agent Building
  • AI-coding skill

Svg Diagram by the numbers

  • Data as of Jul 7, 2026 (Skillselion catalog sync)
/plugin marketplace add tielur/claude-code-skills
/plugin install svg-diagram@claude-code-skills

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
repo stars1
Last updatedMarch 5, 2026
Repositorytielur/claude-code-skills

What it does

Generate technical diagrams, architecture visuals, and layered illustrations as SVG files with an HTML export wrapper for PNG download.

README.md

Claude Code Skills

A community collection of plugins that extend Claude Code with specialized capabilities — diagram generation, document conversion, visualization, and more. Built for Claude Code.

Getting Started

Claude Code

# Add the marketplace
claude plugin marketplace add tielur/claude-code-skills

# Install a specific plugin
claude plugin install svg-diagram@claude-code-skills

Once installed, skills activate automatically when relevant. You can also invoke them directly with slash commands (e.g., /svg-diagram:svg-diagram).

Plugins

Plugin How it helps Output
svg-diagram Generate technical diagrams, architecture visuals, flowcharts, and layered illustrations from descriptions or screenshots. .svg + .html (PNG export)

How Plugins Work

Every plugin follows the same structure:

plugin-name/
├── .claude-plugin/plugin.json   # Manifest
├── skills/                      # Domain knowledge Claude draws on automatically
│   └── skill-name/
│       └── SKILL.md
└── commands/                    # Slash commands you invoke explicitly (optional)
  • Skills encode domain expertise, design guidelines, and step-by-step workflows. Claude draws on them automatically when the task matches.
  • Commands are explicit actions you trigger (e.g., /svg-diagram:svg-diagram).

Everything is file-based — markdown and JSON, no code, no infrastructure, no build steps.

Contributing

Plugins are just markdown files. Fork the repo, add your plugin, and submit a PR.

Adding a plugin

  1. Create a directory for your plugin at the repo root
  2. Add .claude-plugin/plugin.json with name, version, description, and author
  3. Add skills in skills/<skill-name>/SKILL.md
  4. Add an entry to .claude-plugin/marketplace.json
  5. Update the plugin table in this README
  6. Submit a PR

License

MIT

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.