architecture-diagram
Installation
SKILL.md
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)
Related skills
More from keejkrej/design-skills
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
3p5js
p5.js sketches: gen art, shaders, interactive, 3D.
3excalidraw
Hand-drawn Excalidraw JSON diagrams (arch, flow, seq).
3claude-design
Design one-off HTML artifacts (landing, deck, prototype).
3design-md
Author/validate/export Google's DESIGN.md token spec files.
3popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
3