Skip to content

Instantly share code, notes, and snippets.

@RajChowdhury240

RajChowdhury240/sl.html

Created March 26, 2026 18:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save RajChowdhury240/bd596aa686d22dce726018908cb67103 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save RajChowdhury240/bd596aa686d22dce726018908cb67103 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infrastructure Architecture Diagram</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'IBM Plex Sans', sans-serif;
}
.diagram-wrapper {
width: 3840px;
height: 2160px;
background: #ffffff;
position: relative;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
}
/* Definitions for reuse */
</style>
</head>
<body>
<div class="diagram-wrapper">
<svg viewBox="0 0 3840 2160" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Shadows -->
<filter id="shadow-sm" x="-4%" y="-4%" width="108%" height="112%">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.08"/>
</filter>
<filter id="shadow-md" x="-4%" y="-4%" width="108%" height="112%">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.10"/>
</filter>
<filter id="shadow-lg" x="-6%" y="-6%" width="112%" height="116%">
<feDropShadow dx="0" dy="6" stdDeviation="14" flood-color="#000" flood-opacity="0.12"/>
</filter>
<!-- Gradient for container ellipse -->
<linearGradient id="containerGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f0f4f8;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e2e8f0;stop-opacity:1" />
</linearGradient>
<!-- Gradient for ISZ Zone -->
<linearGradient id="iszGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f8fafc;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f1f5f9;stop-opacity:1" />
</linearGradient>
<!-- Gradient for Device boxes -->
<linearGradient id="deviceGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
<stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
</linearGradient>
<!-- Gradient for Analysis Server -->
<linearGradient id="serverGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0891b2;stop-opacity:1" />
</linearGradient>
<!-- Gradient for Chef Server -->
<linearGradient id="chefGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
<stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
</linearGradient>
<!-- Gradient for NAS -->
<linearGradient id="nasGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
</linearGradient>
<!-- Remote zone gradient -->
<linearGradient id="remoteGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fefce8;stop-opacity:1" />
<stop offset="100%" style="stop-color:#fef9c3;stop-opacity:1" />
</linearGradient>
<!-- Arrow marker -->
<marker id="arrowRight" markerWidth="12" markerHeight="8" refX="10" refY="4" orient="auto" markerUnits="userSpaceOnUse">
<path d="M0,0 L12,4 L0,8 L3,4 Z" fill="#475569"/>
</marker>
<marker id="arrowLeft" markerWidth="12" markerHeight="8" refX="2" refY="4" orient="auto" markerUnits="userSpaceOnUse">
<path d="M12,0 L0,4 L12,8 L9,4 Z" fill="#475569"/>
</marker>
<marker id="arrowRightLg" markerWidth="16" markerHeight="10" refX="14" refY="5" orient="auto" markerUnits="userSpaceOnUse">
<path d="M0,0 L16,5 L0,10 L4,5 Z" fill="#475569"/>
</marker>
<marker id="arrowLeftLg" markerWidth="16" markerHeight="10" refX="2" refY="5" orient="auto" markerUnits="userSpaceOnUse">
<path d="M16,0 L0,5 L16,10 L12,5 Z" fill="#475569"/>
</marker>
<!-- Gear icon -->
<symbol id="gearIcon" viewBox="0 0 24 24">
<path fill="#ffffff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.04 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.04 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
</symbol>
<!-- Server rack icon -->
<symbol id="serverIcon" viewBox="0 0 24 24">
<path fill="#ffffff" d="M4,1H20A1,1 0 0,1 21,2V6A1,1 0 0,1 20,7H4A1,1 0 0,1 3,6V2A1,1 0 0,1 4,1M4,9H20A1,1 0 0,1 21,10V14A1,1 0 0,1 20,15H4A1,1 0 0,1 3,14V10A1,1 0 0,1 4,9M4,17H20A1,1 0 0,1 21,18V22A1,1 0 0,1 20,23H4A1,1 0 0,1 3,22V18A1,1 0 0,1 4,17M9,5H10V3H9V5M9,13H10V11H9V13M9,21H10V19H9V21M5,3V5H7V3H5M5,11V13H7V11H5M5,19V21H7V19H5Z"/>
</symbol>
<!-- Storage icon -->
<symbol id="storageIcon" viewBox="0 0 24 24">
<path fill="#ffffff" d="M12,3C7.58,3 4,4.79 4,7V17C4,19.21 7.59,21 12,21C16.41,21 20,19.21 20,17V7C20,4.79 16.42,3 12,3M12,5C15.87,5 18,6.5 18,7C18,7.5 15.87,9 12,9C8.13,9 6,7.5 6,7C6,6.5 8.13,5 12,5M18,17C18,17.5 15.87,19 12,19C8.13,19 6,17.5 6,17V14.77C7.61,15.55 9.72,16 12,16C14.28,16 16.39,15.55 18,14.77V17M18,12.45C16.7,13.4 14.42,14 12,14C9.58,14 7.3,13.4 6,12.45V9.64C7.47,10.47 9.61,11 12,11C14.39,11 16.53,10.47 18,9.64V12.45Z"/>
</symbol>
<!-- Person icon -->
<symbol id="personIcon" viewBox="0 0 24 24">
<path fill="#64748b" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
</symbol>
<!-- Lock icon -->
<symbol id="lockIcon" viewBox="0 0 24 24">
<path fill="#475569" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
</symbol>
<!-- Shield icon for Zscaler -->
<symbol id="shieldIcon" viewBox="0 0 24 24">
<path fill="#475569" d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M17.13,17C15.92,18.85 14.11,20.24 12,20.92C9.89,20.24 8.08,18.85 6.87,17C6.53,16.5 6.24,16 6,15.47C6,13.82 8.71,12.47 12,12.47C15.29,12.47 18,13.79 18,15.47C17.76,16 17.47,16.5 17.13,17Z"/>
</symbol>
</defs>
<!-- Background -->
<rect width="3840" height="2160" fill="#ffffff"/>
<!-- Subtle grid pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#f1f5f9" stroke-width="0.5"/>
</pattern>
<rect width="3840" height="2160" fill="url(#grid)"/>
<!-- Title -->
<text x="1920" y="100" text-anchor="middle" font-family="IBM Plex Sans" font-size="52" font-weight="700" fill="#0f172a" letter-spacing="1">Infrastructure Architecture Diagram</text>
<line x1="1720" y1="120" x2="2120" y2="120" stroke="#0ea5e9" stroke-width="3"/>
<!-- ==================== CONTAINER (Large Ellipse) ==================== -->
<ellipse cx="1600" cy="1100" rx="1350" ry="780" fill="url(#containerGrad)" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="none" filter="url(#shadow-lg)"/>
<!-- Container label -->
<rect x="1480" y="330" width="240" height="48" rx="24" fill="#334155" filter="url(#shadow-sm)"/>
<text x="1600" y="362" text-anchor="middle" font-family="IBM Plex Sans" font-size="24" font-weight="600" fill="#ffffff" letter-spacing="0.5">CONTAINER</text>
<!-- ==================== ANY ZONE - Device 1 (Top Left) ==================== -->
<g transform="translate(440, 520)">
<!-- Zone boundary -->
<rect x="0" y="0" width="420" height="320" rx="16" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" filter="url(#shadow-md)"/>
<!-- Zone header bar -->
<rect x="0" y="0" width="420" height="52" rx="16" fill="#e2e8f0"/>
<rect x="0" y="36" width="420" height="16" fill="#e2e8f0"/>
<text x="210" y="34" text-anchor="middle" font-family="IBM Plex Sans" font-size="20" font-weight="600" fill="#475569" letter-spacing="0.5">ANY ZONE</text>
<!-- Device box -->
<rect x="100" y="80" width="220" height="60" rx="10" fill="url(#deviceGrad)" filter="url(#shadow-sm)"/>
<use href="#gearIcon" x="116" y="90" width="40" height="40"/>
<text x="220" y="118" text-anchor="middle" font-family="IBM Plex Sans" font-size="22" font-weight="600" fill="#ffffff">Device</text>
<!-- Agent label -->
<rect x="130" y="165" width="160" height="44" rx="8" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1.5"/>
<text x="210" y="194" text-anchor="middle" font-family="IBM Plex Sans" font-size="20" font-weight="500" fill="#475569">Agent</text>
<!-- Connection line from agent down -->
<line x1="210" y1="209" x2="210" y2="260" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="6,4"/>
<circle cx="210" cy="260" r="4" fill="#94a3b8"/>
</g>
<!-- ==================== ANY ZONE - Device 2 (Bottom Left) ==================== -->
<g transform="translate(440, 920)">
<!-- Zone boundary -->
<rect x="0" y="0" width="420" height="320" rx="16" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" filter="url(#shadow-md)"/>
<!-- Zone header bar -->
<rect x="0" y="0" width="420" height="52" rx="16" fill="#e2e8f0"/>
<rect x="0" y="36" width="420" height="16" fill="#e2e8f0"/>
<text x="210" y="34" text-anchor="middle" font-family="IBM Plex Sans" font-size="20" font-weight="600" fill="#475569" letter-spacing="0.5">ANY ZONE</text>
<!-- Device box -->
<rect x="100" y="80" width="220" height="60" rx="10" fill="url(#deviceGrad)" filter="url(#shadow-sm)"/>
<use href="#gearIcon" x="116" y="90" width="40" height="40"/>
<text x="220" y="118" text-anchor="middle" font-family="IBM Plex Sans" font-size="22" font-weight="600" fill="#ffffff">Device</text>
<!-- Agent label -->
<rect x="130" y="165" width="160" height="44" rx="8" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1.5"/>
<text x="210" y="194" text-anchor="middle" font-family="IBM Plex Sans" font-size="20" font-weight="500" fill="#475569">Agent</text>
</g>
<!-- ==================== ISZ ZONE ==================== -->
<g transform="translate(1100, 560)">
<!-- ISZ Zone outer boundary -->
<rect x="0" y="0" width="900" height="560" rx="20" fill="url(#iszGrad)" stroke="#64748b" stroke-width="2.5" filter="url(#shadow-lg)"/>
<!-- ISZ Zone header -->
<rect x="0" y="0" width="900" height="56" rx="20" fill="#334155"/>
<rect x="0" y="40" width="900" height="16" fill="#334155"/>
<text x="450" y="38" text-anchor="middle" font-family="IBM Plex Sans" font-size="24" font-weight="700" fill="#ffffff" letter-spacing="1">ISZ ZONE</text>
<!-- ---- Storage ISZ ---- -->
<g transform="translate(40, 80)">
<rect x="0" y="0" width="380" height="430" rx="14" fill="#ffffff" stroke="#94a3b8" stroke-width="1.5" filter="url(#shadow-md)"/>
<!-- Storage header -->
<rect x="0" y="0" width="380" height="50" rx="14" fill="#475569"/>
<rect x="0" y="36" width="380" height="14" fill="#475569"/>
<text x="190" y="34" text-anchor="middle" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#ffffff" letter-spacing="0.5">STORAGE ISZ</text>
<!-- NAS NetApp box -->
<rect x="50" y="100" width="280" height="120" rx="12" fill="url(#nasGrad)" filter="url(#shadow-sm)"/>
<!-- Storage icon -->
<use href="#storageIcon" x="90" y="115" width="50" height="50"/>
<!-- NAS text -->
<text x="210" y="148" text-anchor="middle" font-family="IBM Plex Sans" font-size="24" font-weight="700" fill="#ffffff">NAS NetApp</text>
<text x="210" y="178" text-anchor="middle" font-family="IBM Plex Sans" font-size="16" font-weight="400" fill="#dbeafe">Network Attached Storage</text>
<!-- NFS Encrypted badge -->
<rect x="80" y="260" width="220" height="50" rx="25" fill="#f0fdf4" stroke="#86efac" stroke-width="1.5"/>
<use href="#lockIcon" x="94" y="273" width="24" height="24"/>
<text x="200" y="292" text-anchor="middle" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#166534">NFS Encrypted</text>
</g>
<!-- ---- Compute ISZ ---- -->
<g transform="translate(480, 80)">
<rect x="0" y="0" width="380" height="430" rx="14" fill="#ffffff" stroke="#94a3b8" stroke-width="1.5" filter="url(#shadow-md)"/>
<!-- Compute header -->
<rect x="0" y="0" width="380" height="50" rx="14" fill="#475569"/>
<rect x="0" y="36" width="380" height="14" fill="#475569"/>
<text x="190" y="34" text-anchor="middle" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#ffffff" letter-spacing="0.5">COMPUTE ISZ</text>
<!-- Analysis Server box -->
<rect x="40" y="90" width="300" height="130" rx="12" fill="url(#serverGrad)" filter="url(#shadow-sm)"/>
<!-- Server icon -->
<use href="#serverIcon" x="75" y="105" width="50" height="50"/>
<!-- Server text -->
<text x="200" y="140" text-anchor="middle" font-family="IBM Plex Sans" font-size="24" font-weight="700" fill="#ffffff">Analysis Server</text>
<text x="200" y="170" text-anchor="middle" font-family="IBM Plex Sans" font-size="15" font-weight="400" fill="#cffafe">Compute Engine</text>
<!-- Port info -->
<rect x="40" y="250" width="300" height="120" rx="10" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1.5"/>
<text x="190" y="280" text-anchor="middle" font-family="IBM Plex Sans" font-size="16" font-weight="600" fill="#334155">HTTP Access Ports</text>
<line x1="80" y1="295" x2="300" y2="295" stroke="#e2e8f0" stroke-width="1"/>
<text x="190" y="322" text-anchor="middle" font-family="IBM Plex Sans" font-size="18" font-weight="500" fill="#0891b2">:8883</text>
<text x="190" y="348" text-anchor="middle" font-family="IBM Plex Sans" font-size="16" font-weight="400" fill="#64748b">:8880 (Admin)</text>
</g>
<!-- NFS connection arrow between Storage and Compute -->
<line x1="420" y1="290" x2="480" y2="290" stroke="#3b82f6" stroke-width="2.5" marker-end="url(#arrowRight)" marker-start="url(#arrowLeft)"/>
<rect x="425" y="270" width="50" height="22" rx="4" fill="#ffffff"/>
<text x="450" y="286" text-anchor="middle" font-family="IBM Plex Sans" font-size="12" font-weight="500" fill="#3b82f6">NFS</text>
</g>
<!-- ==================== CSZ - Chef Server ==================== -->
<g transform="translate(1050, 1320)">
<!-- CSZ boundary -->
<rect x="0" y="0" width="360" height="260" rx="16" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" filter="url(#shadow-md)"/>
<!-- CSZ header -->
<rect x="0" y="0" width="360" height="50" rx="16" fill="#e2e8f0"/>
<rect x="0" y="36" width="360" height="14" fill="#e2e8f0"/>
<text x="180" y="34" text-anchor="middle" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#475569" letter-spacing="0.5">CSZ</text>
<!-- Chef Server box -->
<rect x="60" y="80" width="240" height="80" rx="10" fill="url(#chefGrad)" filter="url(#shadow-sm)"/>
<text x="180" y="130" text-anchor="middle" font-family="IBM Plex Sans" font-size="22" font-weight="700" fill="#ffffff">Chef Server</text>
<!-- Config management label -->
<text x="180" y="200" text-anchor="middle" font-family="IBM Plex Sans" font-size="15" font-weight="400" fill="#64748b">Configuration Management</text>
</g>
<!-- ==================== REMOTE / BUSINESS CENTER ==================== -->
<g transform="translate(2820, 620)">
<!-- Remote zone boundary -->
<rect x="0" y="0" width="600" height="540" rx="20" fill="url(#remoteGrad)" stroke="#eab308" stroke-width="2" filter="url(#shadow-lg)"/>
<!-- Remote header -->
<rect x="0" y="0" width="600" height="56" rx="20" fill="#854d0e"/>
<rect x="0" y="40" width="600" height="16" fill="#854d0e"/>
<text x="300" y="38" text-anchor="middle" font-family="IBM Plex Sans" font-size="22" font-weight="700" fill="#ffffff" letter-spacing="0.5">REMOTE / BUSINESS CENTER</text>
<!-- SYF Employee -->
<g transform="translate(120, 110)">
<circle cx="80" cy="30" r="30" fill="#e0f2fe" stroke="#0ea5e9" stroke-width="2"/>
<use href="#personIcon" x="56" y="6" width="48" height="48"/>
<text x="80" y="90" text-anchor="middle" font-family="IBM Plex Sans" font-size="20" font-weight="600" fill="#0f172a">SYF Employee</text>
<rect x="20" y="110" width="120" height="32" rx="16" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/>
<text x="80" y="132" text-anchor="middle" font-family="IBM Plex Sans" font-size="14" font-weight="500" fill="#1e40af">SSO Auth</text>
</g>
<!-- Contractor -->
<g transform="translate(340, 110)">
<circle cx="80" cy="30" r="30" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/>
<use href="#personIcon" x="56" y="6" width="48" height="48"/>
<text x="80" y="90" text-anchor="middle" font-family="IBM Plex Sans" font-size="20" font-weight="600" fill="#0f172a">Contractor</text>
<rect x="8" y="110" width="144" height="32" rx="16" fill="#fef9c3" stroke="#fde047" stroke-width="1"/>
<text x="80" y="132" text-anchor="middle" font-family="IBM Plex Sans" font-size="14" font-weight="500" fill="#854d0e">Given SSO Access</text>
</g>
<!-- Zscaler Access badge -->
<rect x="100" y="320" width="400" height="70" rx="35" fill="#ffffff" stroke="#64748b" stroke-width="2" filter="url(#shadow-sm)"/>
<use href="#shieldIcon" x="132" y="333" width="44" height="44"/>
<text x="320" y="362" text-anchor="middle" font-family="IBM Plex Sans" font-size="22" font-weight="600" fill="#334155">Zscaler Access</text>
<!-- Access info -->
<text x="300" y="440" text-anchor="middle" font-family="IBM Plex Sans" font-size="16" font-weight="400" fill="#64748b">Secure remote access via</text>
<text x="300" y="465" text-anchor="middle" font-family="IBM Plex Sans" font-size="16" font-weight="400" fill="#64748b">Zscaler Zero Trust Network</text>
</g>
<!-- ==================== CONNECTION ARROWS ==================== -->
<!-- Arrow: Remote/Business Center → Analysis Server (HTTP) -->
<g>
<line x1="2820" y1="890" x2="2090" y2="890" stroke="#475569" stroke-width="3" marker-end="url(#arrowLeftLg)" marker-start="url(#arrowRightLg)"/>
<!-- Label box for HTTP connection -->
<rect x="2270" y="830" width="340" height="90" rx="12" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#shadow-sm)"/>
<text x="2440" y="860" text-anchor="middle" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#334155">HTTP Access</text>
<text x="2440" y="888" text-anchor="middle" font-family="IBM Plex Sans" font-size="16" font-weight="500" fill="#0891b2">Port :8883</text>
<text x="2440" y="912" text-anchor="middle" font-family="IBM Plex Sans" font-size="15" font-weight="400" fill="#64748b">Port :8880 (Admin)</text>
</g>
<!-- Arrow: Device 1 → ISZ Zone -->
<g>
<line x1="860" y1="720" x2="1100" y2="790" stroke="#475569" stroke-width="2.5" marker-end="url(#arrowRightLg)"/>
</g>
<!-- Arrow: Device 2 → ISZ Zone -->
<g>
<line x1="860" y1="1080" x2="1100" y2="980" stroke="#475569" stroke-width="2.5" marker-end="url(#arrowRightLg)"/>
</g>
<!-- Arrow: Device 2 → Chef Server (HTTPS) -->
<g>
<line x1="860" y1="1200" x2="1050" y2="1400" stroke="#475569" stroke-width="2.5" marker-end="url(#arrowRightLg)" stroke-dasharray="10,5"/>
<!-- HTTPS label -->
<rect x="870" y="1280" width="110" height="34" rx="17" fill="#f0fdf4" stroke="#86efac" stroke-width="1.5"/>
<text x="925" y="1303" text-anchor="middle" font-family="IBM Plex Sans" font-size="15" font-weight="600" fill="#166534">HTTPS</text>
</g>
<!-- NFS Encrypted label between Device zones and ISZ -->
<g>
<rect x="900" y="856" width="180" height="40" rx="20" fill="#eff6ff" stroke="#93c5fd" stroke-width="1.5" filter="url(#shadow-sm)"/>
<use href="#lockIcon" x="912" y="864" width="24" height="24"/>
<text x="1004" y="883" text-anchor="middle" font-family="IBM Plex Sans" font-size="14" font-weight="600" fill="#1d4ed8">NFS Encrypted</text>
</g>
<!-- Zscaler label on the connection -->
<g>
<rect x="2160" y="785" width="180" height="34" rx="17" fill="#f8fafc" stroke="#94a3b8" stroke-width="1"/>
<use href="#shieldIcon" x="2168" y="789" width="26" height="26"/>
<text x="2264" y="808" text-anchor="middle" font-family="IBM Plex Sans" font-size="14" font-weight="500" fill="#475569">Zscaler</text>
</g>
<!-- ==================== LEGEND ==================== -->
<g transform="translate(160, 1740)">
<rect x="0" y="0" width="700" height="260" rx="16" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#shadow-md)"/>
<text x="350" y="40" text-anchor="middle" font-family="IBM Plex Sans" font-size="22" font-weight="700" fill="#0f172a">LEGEND</text>
<line x1="40" y1="55" x2="660" y2="55" stroke="#e2e8f0" stroke-width="1"/>
<!-- Legend items -->
<!-- Device -->
<rect x="40" y="80" width="30" height="20" rx="4" fill="url(#deviceGrad)"/>
<text x="85" y="96" font-family="IBM Plex Sans" font-size="17" font-weight="500" fill="#334155">Device / Agent</text>
<!-- Server -->
<rect x="40" y="120" width="30" height="20" rx="4" fill="url(#serverGrad)"/>
<text x="85" y="136" font-family="IBM Plex Sans" font-size="17" font-weight="500" fill="#334155">Analysis Server</text>
<!-- Storage -->
<rect x="40" y="160" width="30" height="20" rx="4" fill="url(#nasGrad)"/>
<text x="85" y="176" font-family="IBM Plex Sans" font-size="17" font-weight="500" fill="#334155">NAS Storage</text>
<!-- Chef -->
<rect x="40" y="200" width="30" height="20" rx="4" fill="url(#chefGrad)"/>
<text x="85" y="216" font-family="IBM Plex Sans" font-size="17" font-weight="500" fill="#334155">Chef Server (Config Mgmt)</text>
<!-- Encrypted -->
<rect x="380" y="80" width="30" height="20" rx="4" fill="#f0fdf4" stroke="#86efac" stroke-width="1"/>
<text x="425" y="96" font-family="IBM Plex Sans" font-size="17" font-weight="500" fill="#334155">Encrypted Connection</text>
<!-- Direct arrow -->
<line x1="380" y1="130" x2="410" y2="130" stroke="#475569" stroke-width="2.5" marker-end="url(#arrowRight)"/>
<text x="425" y="136" font-family="IBM Plex Sans" font-size="17" font-weight="500" fill="#334155">Direct Connection</text>
<!-- Dashed arrow -->
<line x1="380" y1="170" x2="410" y2="170" stroke="#475569" stroke-width="2.5" stroke-dasharray="6,4" marker-end="url(#arrowRight)"/>
<text x="425" y="176" font-family="IBM Plex Sans" font-size="17" font-weight="500" fill="#334155">HTTPS Connection</text>
<!-- Bidirectional arrow -->
<line x1="380" y1="210" x2="410" y2="210" stroke="#475569" stroke-width="2.5" marker-end="url(#arrowRight)" marker-start="url(#arrowLeft)"/>
<text x="425" y="216" font-family="IBM Plex Sans" font-size="17" font-weight="500" fill="#334155">Bidirectional</text>
</g>
<!-- ==================== ZONE LABELS (Bottom) ==================== -->
<g transform="translate(1200, 1740)">
<rect x="0" y="0" width="800" height="260" rx="16" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#shadow-md)"/>
<text x="400" y="40" text-anchor="middle" font-family="IBM Plex Sans" font-size="22" font-weight="700" fill="#0f172a">NETWORK ZONES</text>
<line x1="40" y1="55" x2="760" y2="55" stroke="#e2e8f0" stroke-width="1"/>
<text x="60" y="95" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#334155">ISZ</text>
<text x="120" y="95" font-family="IBM Plex Sans" font-size="17" font-weight="400" fill="#64748b">Internal Secure Zone — Core infrastructure</text>
<text x="60" y="135" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#334155">CSZ</text>
<text x="120" y="135" font-family="IBM Plex Sans" font-size="17" font-weight="400" fill="#64748b">Configuration Secure Zone — Chef management</text>
<text x="60" y="175" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#334155">Any Zone</text>
<text x="170" y="175" font-family="IBM Plex Sans" font-size="17" font-weight="400" fill="#64748b">General network zone — Device agents</text>
<text x="60" y="215" font-family="IBM Plex Sans" font-size="18" font-weight="600" fill="#334155">Remote</text>
<text x="170" y="215" font-family="IBM Plex Sans" font-size="17" font-weight="400" fill="#64748b">External access — Business center / VPN</text>
</g>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment