claudegoodies
Skill

architecture-diagram

From NousResearch

Dark-themed SVG architecture/cloud/infra diagrams as HTML.

Generates dark-themed architecture/infra diagrams as self-contained SVG-in-HTML files.

Use it when

  • Documenting system architecture with frontend/backend/database layers
  • Diagramming cloud infra like VPCs, regions, subnets, managed services
  • Mapping microservice or service-mesh topology
  • Producing a deployment or database+API diagram

Skip it if

  • Subject is scientific, physical objects, floor plans, or narrative visuals
  • Want hand-drawn sketches (use excalidraw) or animated explainers instead
  • Need something other than a fixed dark grid aesthetic

Facts

Repository
NousResearch/hermes-agent
Status
Actively maintained
Last commit
Source file
skills/creative/architecture-diagram/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# Architecture Diagram Skill

Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.

## Scope

**Best suited for:**
- Software system architecture (frontend / backend / database layers)
- Cloud infrastructure (VPC, regions, subnets, managed services)
- Microservice / service-mesh topology
- Database + API map, deployment diagrams
- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic

**Look elsewhere first for:**
- Physics, chemistry, math, biology, or other scientific subjects
- Physical objects (vehicles, hardware, anatomy, cross-sections)
- Floor plans, narrative journeys, educational / textbook-style visuals
- Hand-drawn whiteboard sketches (consider `excalidraw`)
- Animated explainers (consider an animation skill)

If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.

Based on [Cocoon AI's architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) (MIT).

## Workflow

1. User describes their system architecture (components, connections, technologies)
2. Generate the HTML file following the
View full source on GitHub →

Other skills