HTML Architecture & System Diagrams

Architecture diagrams answer the questions that come up most often during incidents and design reviews: what talks to what, who owns what, where does the data live, what fails when X goes down. A good HTML system diagram is the document you open during the incident, not the one you write after.

This skill is more focused than general SVG diagrams — specifically for system-level architecture.

When to use this skill

• "Diagram our [system, architecture, services, infrastructure]"
• "Show me how X talks to Y"
• "Map our [microservices, dependencies, deployment, data flow]"
• "Document the architecture of Z for the design review"
• "Help an incident responder understand the system"

Output requirements

Diagram as inline SVG. Include a legend if shapes/colors carry meaning. Save with a name like <system>-architecture.html and treat it as a versioned doc — these get opened during incidents, so the date in the footer matters.

HTML output foundation