Architecture Diagram Generator

Create professional dark-themed architecture diagrams as standalone HTML files with inline SVG graphics.

candidatehtml-svghtmlsvg

Architecture Diagram Generator preview

architecture-diagram-generator

Why It Is Here

This skill targets polished architecture diagrams delivered as standalone HTML files. It is useful when the diagram is not just an inline asset, but a shareable visual page with a dark theme, summary cards, and inline SVG.

Best For

System architecture overviews.
Cloud and infrastructure diagrams.
Security boundary and network topology diagrams.
Shareable HTML artifacts that open directly in a browser.

Evaluation Notes

Strengths: self-contained output, strong visual identity, explicit component color system, good for demos and stakeholder reviews.
Weaknesses: heavier than plain SVG, less suitable for native diagram-editor workflows, no validator.
Open questions: whether to preserve upstream examples in this repo or keep only our own benchmark examples.

Artifacts

Example: examples/service-architecture.html
Preview: screenshots/service-architecture-preview.png
Editable preview source: screenshots/service-architecture-preview.svg

Maintenance

Last checked: 2026-04-26
Next action: render the HTML example in browser and decide whether to add automated screenshot capture.

Artifacts

Name	Kind	Description
service-architecture.html	html	Self-contained HTML example with inline SVG architecture diagram.
service-architecture-preview.png	png	PNG screenshot generated from the vector preview.
service-architecture-preview.svg	svg	Lightweight vector preview of the HTML example.