architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
npx skills add HezaoHezao/poirot --skill architecture-diagram --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Architecture Diagram ## Overview 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 → use `concept-diagrams` - Floor plans, educational visuals → use `concept-diagrams` - Hand-drawn sketches → use excalidraw ## Workflow 1. User describes their system architecture (components, connections, technologies) 2. Generate the HTML file following the design system below 3. Save with `write_file` to a `.html` file 4. User opens in any browser — works offline, no dependencies ``` write_file("architecture.html", "<full HTML with inline SVG + CSS>") ``` ### Output Location ```bash # Default to current working directory ./[project-name]-arc
- Overview
- Scope
- Workflow
- Output Location
- Design System
- Aesthetic
- Color Palette
- SVG Template
- Diagram Patterns
- Layered Architecture
- Microservice Topology
- Cloud Infrastructure
- Data Flow
- Pitfalls
Default to current working directory
What does the architecture-diagram skill do?
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
How do I install it?
Run `npx skills add HezaoHezao/poirot --skill architecture-diagram --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From HezaoHezao/poirot, a repository with 139 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.