Architecture Diagram Skill

Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.

Workflow

You MUST follow these steps in order:

Step 1: Layout Planning (REQUIRED)

Before writing any SVG code, create an ASCII layout plan. This prevents arrow misrouting and overlapping.

Format:
[Component]  x,y  WxH  → edges: →Target1, →Target2