Spaces:
Running
Running
File size: 6,249 Bytes
abf2b59 4cb3f71 abf2b59 4cb3f71 abf2b59 15de190 4cb3f71 abf2b59 4cb3f71 0d08e04 4cb3f71 79d156a 4cb3f71 0d08e04 abf2b59 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<!DOCTYPE html>
<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> |