Generate dark-themed SVG diagrams of software systems and cloud infrastructure as standalone HTML files with inline SVG graphics. Semantic component colors (cyan=frontend, emerald=backend, violet=data
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
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.
Best suited for:
Look elsewhere first for:
excalidrawIf 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).
write_file.html~/architecture-diagram.htmlSave diagrams to a user-specified path, or default to the current working directory:
./[project-name]-architecture.html
After saving, suggest the user open it:
# macOS open ./my-architecture.html # Linux xdg-open ./my-architecture.html
Use specific
rgba| Component Type | Fill (rgba) | Stroke (Hex) |
|---|---|---|
| Frontend | | |
| Backend | | |
| Database | | |
| AWS/Cloud | | |
| Security | | |
| Message Bus | | |
| External | | |
#020617<!-- Background Grid Pattern --> <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"> <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/> </pattern>
Components are rounded rectangles (
rx="6"#0f172a#fb71854,48,4rx="12"The generated HTML file follows a four-part layout:
<div class="card"> <div class="card-header"> <div class="card-dot cyan"></div> <h3>Title</h3> </div> <ul> <li>• Item one</li> <li>• Item two</li> </ul> </div>
.htmlLoad the full HTML template for the exact structure, CSS, and SVG component examples:
skill_view(name="architecture-diagram", file_path="templates/template.html")
The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.
MIT
mkdir -p ~/.hermes/skills/creative/architecture-diagram && curl -o ~/.hermes/skills/creative/architecture-diagram/SKILL.md https://raw.githubusercontent.com/NousResearch/hermes-agent/main/skills/creative/architecture-diagram/SKILL.md
1,500+ AI skills, agents & workflows. Install in 30 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.