Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Azure Terraform Visualization</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f0f2f5; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| padding: 20px; | |
| } | |
| h1 { | |
| color: #333; | |
| } | |
| .svg-container { | |
| border: 1px solid #ccc; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| background-color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Visualization of Azure Terraform Layout</h1> | |
| <div class="svg-container"> | |
| <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="font-family: Arial, sans-serif; background-color: #f9f9f9;"> | |
| <title>Azure Terraform Layout</title> | |
| <!-- Definitions for icons and markers --> | |
| <defs> | |
| <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> | |
| <path d="M 0 0 L 10 5 L 0 10 z" fill="#444" /> | |
| </marker> | |
| <!-- Azure Icons (simplified representations) --> | |
| <g id="icon-public-ip"> | |
| <path d="M2,2 h20 v20 h-20z" fill="#0078D4"/> | |
| <path d="M12,5 l-5,5 h3 v6 h4 v-6 h3 z" fill="white"/> | |
| </g> | |
| <g id="icon-lb"> | |
| <path d="M2,2 h20 v20 h-20z" fill="#0078D4"/> | |
| <path d="M4,12 h16 m-16,-4 h16 m-12,8 l-3,-4 h14 l-3,4" fill="none" stroke="white" stroke-width="2"/> | |
| </g> | |
| <g id="icon-vmss"> | |
| <path d="M2,2 h20 v20 h-20z" fill="#0078D4"/> | |
| <rect x="5" y="5" width="14" height="14" fill="white" /> | |
| <rect x="7" y="7" width="10" height="10" fill="#0078D4" /> | |
| <rect x="9" y="9" width="6" height="6" fill="white" /> | |
| </g> | |
| <g id="icon-internet"> | |
| <path fill="#A0A0A0" d="M35.6,20.8c-0.1-2-0.8-3.8-1.9-5.5c-1.2-1.6-2.8-2.9-4.7-3.6c-1.9-0.7-4-0.8-6-0.3c-2,0.5-3.8,1.5-5.2,3 c-1.4,1.5-2.3,3.4-2.6,5.5c-0.3,2.1,0.1,4.2,0.9,6.2c0.8,2,2.1,3.7,3.8,5c1.7,1.3,3.7,2.1,5.9,2.2c2.2,0.1,4.3-0.4,6.2-1.4 c1.9-1,3.5-2.5,4.6-4.3C35.2,25.9,35.7,23.4,35.6,20.8z M33.2,26.5c-1,1.6-2.4,2.9-4.1,3.7c-1.7,0.8-3.6,1.1-5.5,0.9 c-1.9-0.2-3.7-0.9-5.2-2.1c-1.5-1.2-2.6-2.7-3.2-4.5c-0.6-1.8-0.7-3.7-0.3-5.5c0.4-1.8,1.3-3.5,2.6-4.8c1.3-1.3,3-2.2,4.8-2.6 c1.8-0.4,3.7-0.3,5.5,0.3c1.8,0.6,3.4,1.7,4.5,3.2c1.1,1.5,1.7,3.3,1.9,5.1c0.1,1.8-0.2,3.6-0.9,5.2 C34.4,24.3,33.9,25.5,33.2,26.5z"/> | |
| </g> | |
| </defs> | |
| <!-- Main Drawing --> | |
| <!-- Resource Group --> | |
| <rect x="10" y="10" width="780" height="580" rx="10" ry="10" fill="#E6F2FF" stroke="#0078D4" stroke-width="2"/> | |
| <text x="30" y="40" font-size="16" font-weight="bold">Resource Group: my-terraform-rg</text> | |
| <!-- VNet --> | |
| <rect x="30" y="70" width="740" height="400" rx="5" ry="5" fill="#D4E8FF" stroke="#0078D4" stroke-width="1.5" stroke-dasharray="4"/> | |
| <text x="50" y="100" font-size="14" font-weight="bold">Virtual Network: my-terraform-vnet</text> | |
| <text x="50" y="120" font-size="12">Address Space: 10.0.0.0/16</text> | |
| <!-- Subnet --> | |
| <rect x="50" y="150" width="700" height="300" rx="5" ry="5" fill="#C2DEFF" stroke="#0078D4" stroke-width="1" stroke-dasharray="2"/> | |
| <text x="70" y="180" font-size="14" font-weight="bold">Subnet: my-terraform-subnet</text> | |
| <text x="70" y="200" font-size="12">Address Prefixes: 10.0.2.0/24</text> | |
| <!-- Internet --> | |
| <use xlink:href="#icon-internet" x="50" y="250" width="50" height="50"/> | |
| <text x="70" y="320" font-size="14">Internet</text> | |
| <!-- Public IP --> | |
| <use xlink:href="#icon-public-ip" x="180" y="280" width="30" height="30"/> | |
| <text x="170" y="325" font-size="12" font-weight="bold">Public IP</text> | |
| <text x="145" y="340" font-size="10">my-terraform-public-ip</text> | |
| <!-- Load Balancer --> | |
| <use xlink:href="#icon-lb" x="300" y="280" width="30" height="30"/> | |
| <text x="275" y="325" font-size="12" font-weight="bold">Load Balancer</text> | |
| <text x="278" y="340" font-size="10">my-terraform-lb</text> | |
| <text x="275" y="365" font-size="10" fill="#333">Rule: 80 -> ${var.server_port}</text> | |
| <text x="280" y="380" font-size="10" fill="#333">Probe: Port ${var.server_port}</text> | |
| <!-- VM Scale Set --> | |
| <g transform="translate(450, 250)"> | |
| <use xlink:href="#icon-vmss" width="40" height="40"/> | |
| <text x="-5" y="55" font-size="12" font-weight="bold">VM Scale Set</text> | |
| <text x="-35" y="70" font-size="10">my-terraform-vm-scale-set</text> | |
| </g> | |
| <g transform="translate(550, 250)"> | |
| <use xlink:href="#icon-vmss" width="40" height="40"/> | |
| <text x="-5" y="55" font-size="12" font-weight="bold">VM Scale Set</text> | |
| <text x="-35" y="70" font-size="10">my-terraform-vm-scale-set</text> | |
| </g> | |
| <rect x="430" y="230" width="240" height="110" fill="none" stroke="#4CAF50" stroke-width="1.5" stroke-dasharray="3"/> | |
| <text x="460" y="360" font-size="10" font-weight="bold" fill="#4CAF50">Backend Address Pool</text> | |
| <text x="462" y="375" font-size="10" fill="#4CAF50">my-terraform-lb-backend-pool</text> | |
| <!-- Connection Lines --> | |
| <path d="M 120 295 C 150 295, 150 295, 180 295" stroke="#444" stroke-width="2" fill="none" marker-end="url(#arrow)"/> | |
| <path d="M 210 295 C 250 295, 270 295, 300 295" stroke="#444" stroke-width="2" fill="none" marker-end="url(#arrow)"/> | |
| <path d="M 330 295 C 380 295, 400 295, 430 295" stroke="#444" stroke-width="2" fill="none" marker-end="url(#arrow)"/> | |
| </svg> | |
| </div> | |
| </body> | |
| </html> |