with one click
with one click
| 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.
Decomposition playbook + anti-temptation rules for an orchestrator profile routing work through Kanban. The "don't do the work yourself" rule and the basic lifecycle are auto-injected into every kanban worker's system prompt; this skill is the deeper playbook when you're specifically playing the orchestrator role.
Gmail, Calendar, Drive, Docs, Sheets via gws CLI or Python.
Configure and use Honcho memory with Hermes -- cross-session user modeling, multi-profile peer isolation, observation config, dialectic reasoning, session summaries, and context budget enforcement. Use when setting up Honcho, troubleshooting memory, managing profiles with Honcho peers, or tuning observation, recall, and dialectic settings.
Migrate a user's OpenClaw customization footprint into Hermes Agent. Imports Hermes-compatible memories, SOUL.md, command allowlists, user skills, and selected workspace assets from ~/.openclaw, then reports exactly what could not be migrated and why.
Configure, extend, or contribute to Hermes Agent.
Operate the Antigravity CLI (agy): plugins, auth, sandbox.