Svg Infra Diagrammer

The problem

Architecture diagrams often rot in siloed design tools or break in READMEs due to missing image assets and broken network fonts. Developers need clean, version-controllable diagrams that render perfectly in any browser without external dependencies.

What it does

• Generates self-contained HTML files featuring hand-written, dark-themed SVG infrastructure diagrams.
• Uses a standardized component library including rounded boxes, clusters, arrows, and cloud symbols.
• Enforces a consistent GitHub-inspired dark palette for professional, high-contrast visuals.
• Creates scalable, accessible diagrams with crisp monospace text that maintains clarity at any zoom level.
• Includes click-to-inspect behavior by wrapping SVG groups in anchor links for interactive documentation.

Frameworks & tools

SVG, HTML5, CSS, and Chromium for headless PNG exports.

Why this beats prompting it yourself

General LLMs often produce messy, overlapping SVG code or use inconsistent colors that clash with dark mode docs. This skill applies a rigorous draw order and a specific component schema to ensure every arrow connects and every label is legible.

Use cases

• Documenting cloud infrastructure in GitHub READMEs using embedded HTML/SVG.
• Creating high-resolution architecture slides for technical presentations.
• Visualizing CI/CD pipelines or microservice data flows for onboarding.
• Generating interactive system maps with clickable components for internal wikis.

Known limitations

Not suitable for UML sequence or ER diagrams requiring heavy formal notation. Does not export to editable formats like Figma or Visio.