Agent skill · design visual · nousresearch
architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
Why this skill is useful
Generates specialized SVG architecture diagrams with specific design patterns and color schemes that the AI wouldn't reliably create on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 226,679 stars on the source repository.
What this skill does
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 (MIT). Workflow 1. User describes their system architecture (components, connections, technologies) 2. Generate the HTML file following the design system below 3. Save with writefile to a .html file (e.g. ~/architecture-diagram.html) 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nousresearch/architecture-diagram