Menü
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
| name | architecture-diagram |
| description | Dark-themed SVG architecture/cloud/infra diagrams as HTML. |
| version | 1.0.0 |
| author | Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent |
| license | MIT |
| dependencies | [] |
| platforms | ["linux","macos","windows"] |
| metadata | {"hermes":{"tags":["architecture","diagrams","SVG","HTML","visualization","infrastructure","cloud"],"related_skills":["concept-diagrams","excalidraw"]}} |
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:
excalidraw)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).
write_file to a .html file (e.g. ~/architecture-diagram.html)Save 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 fills and hex strokes to categorize components:
| Component Type | Fill (rgba) | Stroke (Hex) |
|---|---|---|
| Frontend | rgba(8, 51, 68, 0.4) | #22d3ee (cyan-400) |
| Backend | rgba(6, 78, 59, 0.4) | #34d399 (emerald-400) |
| Database | rgba(76, 29, 149, 0.4) | #a78bfa (violet-400) |
| AWS/Cloud | rgba(120, 53, 15, 0.3) | #fbbf24 (amber-400) |
| Security | rgba(136, 19, 55, 0.4) | #fb7185 (rose-400) |
| Message Bus | rgba(251, 146, 60, 0.3) | #fb923c (orange-400) |
| External | rgba(30, 41, 59, 0.5) | #94a3b8 (slate-400) |
#020617) with a subtle 40px grid pattern<!-- 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") with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a double-rect masking technique:
#0f172a)#fb7185)4,4), rose color8,4), amber color, rx="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>
.html fileLoad 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.
Join a Google Meet call, transcribe live captions, optionally speak in realtime, and do the followup work afterwards. Use when the user asks the agent to sit in on a meeting, take notes, summarize, respond in-call, or action items from it.
Parallel 3-agent cleanup of recent code changes.
Delegate coding to OpenAI Codex CLI (features, PRs).
Gmail, Calendar, Drive, Docs, Sheets via gws CLI or Python.
Configure, extend, or contribute to Hermes Agent.
Modify, debug, or extend the s6-overlay supervision tree inside the Hermes Agent Docker image — adding new services, debugging profile gateways, understanding the Architecture B main-program pattern.