Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →lord1egypt/architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
Passed 11 of 20 test cases with the skill, and 5 of 20 without it.
and 9 more in the full report
8 fixed4 passed either way9 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
When placing the legend component inside a cloud architecture SVG with VPC boundary boxes, where should the legend be positioned relative to the boundary boxes?
| Checked | Without skill | With skill |
|---|---|---|
| The legend is placed outside all boundary boxes, at least 20px below the lowest boundary Y-coordinate. | Missed | Passed |
The instructions your model reads when the skill loads.
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
test cases passed, vs 5 / 20 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.