Turn a system description into a dark-themed architecture diagram in a single HTML file. It uses SVG, a scalable graphics format, to show components, connections, cloud boundaries, and security flows in a browser.
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
Turn system components and their connections into an architecture diagram with a dark background, delivered as an HTML file. The diagram uses SVG so outlines stay clear when enlarged. Frontend processing, backend processing, and databases receive distinct colors. It also shows arrows between services, cloud regions, and security boundaries, accompanied by a legend and three summary cards.
Use it to explain a software system as a whole or organize a cloud environment and connections between services in one diagram. It also helps share database and API relationships or the structure of a deployment environment. The output is a single file that you can open and inspect in a browser.
No external drawing tools or API keys are required. CSS and SVG are included in the HTML, and no JavaScript is used. However, the specified font, JetBrains Mono, loads from Google Fonts. The diagram can also be opened offline. Scientific diagrams, floor plans, and hand-drawn-style diagrams are not its main focus.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.
The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Set up the 1Password CLI and use stored passwords or API keys in commands and configuration templates. Choose an authentication method, retrieve secret references, and pass credentials to processes through environment variables.
Build an Excel workbook linking the income statement, balance sheet, and cash flow statement. Populate historical figures, create formula-based forecasts, compare scenarios, and check that balances and cash totals agree across all three statements.
Adapt existing PyTorch training scripts to use multiple GPUs or machines with limited code changes. The skill guides configuration, launch commands, mixed precision, which uses lower-precision numbers, and DeepSpeed or FSDP settings for distributing training work and memory.
Configure Hermes to run AI models through Actual Computer on your own hardware. Set up either the hosted relay or a local connection, select models, verify responses, and troubleshoot request errors or empty output.
Test an app from the perspective of a frustrated, less technical user. Find confusing steps and barriers, separate actionable usability problems from personal complaints, and produce screenshots, suggested fixes, and prioritized tickets.
Resolve Git merge conflicts between two agents by comparing both changes and their stated goals. Combine compatible work, explain choices where designs differ, and verify the merged result with project builds or tests.