# Infrastructure Patterns Reusable shapes and line styles for infrastructure / systems-integration diagrams (smart cities, IoT networks, industrial systems, multi-domain architectures). ## Layout pattern: hub-spoke - **Central hub**: Hexagon or circle representing the integration platform - **Radiating connections**: Data lines from hub to each subsystem with connection dots - **Subsystem sections**: Each system (power, water, transport) in its own region - **Dashboard on top**: Optional UI mockup showing a unified view (see `dashboard-patterns.md`) ```xml ``` ## Semantic line styles Use a dedicated CSS class per subsystem so every diagram reads the same way: ```css .data-line { stroke: #7F77DD; stroke-width: 2; fill: none; stroke-dasharray: 4 3; } .power-line { stroke: #EF9F27; stroke-width: 2; fill: none; } .water-pipe { stroke: #378ADD; stroke-width: 4; stroke-linecap: round; fill: none; } .road { stroke: #888780; stroke-width: 8; stroke-linecap: round; fill: none; } ``` ## Power systems **Solar panel (angled):** ```xml ``` **Wind turbine:** ```xml ``` **Battery with charge level:** ```xml ``` **Power pylon:** ```xml ``` ## Water systems **Reservoir/dam:** ```xml ``` **Treatment tank:** ```xml ``` **Pipe with joint and valve:** ```xml ``` ## Transport systems **Road with lane markings:** ```xml ``` **Traffic light:** ```xml ``` **Bus:** ```xml ``` ## Full CSS block (add to the host page or inline