<svg viewBox="0 0 1000 700" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.title { font-family: 'Segoe UI', sans-serif; font-size: 18px; font-weight: bold; fill: #e0e0e0; }
.subtitle { font-family: 'Segoe UI', sans-serif; font-size: 14px; fill: #b0b0b0; }
.label { font-family: 'Segoe UI', sans-serif; font-size: 12px; fill: #0f172a; }
.small-label { font-family: 'Segoe UI', sans-serif; font-size: 10px; fill: #cccccc; }
.container { fill: #2d3748; stroke: #4a5568; stroke-width: 2; rx: 8; }
.component { fill: #1a202c; stroke: #2d3748; stroke-width: 1; rx: 6; }
.service { fill: #2b6cb0; stroke: #3182ce; stroke-width: 2; rx: 4; }
.database { fill: #38a169; stroke: #48bb78; stroke-width: 2; rx: 4; }
.external { fill: #d69e2e; stroke: #ed8936; stroke-width: 2; rx: 4; }
.flow { stroke: #63b3ed; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
</style>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#63b3ed" />
</marker>
</defs>
<!-- Background -->
<rect width="1000" height="700" fill="#0f172a"/>
<!-- Title -->
<text x="500" y="30" text-anchor="middle" class="title">Arquitectura del Proyecto Final MCP Server</text>
<!-- Client Layer -->
<rect x="50" y="80" width="900" height="100" class="container"/>
<text x="70" y="100" class="subtitle">Capa de Cliente</text>
<rect x="100" y="120" width="120" height="40" class="service"/>
<text x="160" y="142" text-anchor="middle" class="label">Claude Desktop</text>
<rect x="250" y="120" width="120" height="40" class="service"/>
<text x="310" y="142" text-anchor="middle" class="label">Web Client</text>
<rect x="400" y="120" width="120" height="40" class="service"/>
<text x="460" y="142" text-anchor="middle" class="label">Mobile App</text>
<rect x="550" y="120" width="120" height="40" class="service"/>
<text x="610" y="142" text-anchor="middle" class="label">API Client</text>
<!-- Gateway Layer -->
<rect x="50" y="220" width="900" height="80" class="container"/>
<text x="70" y="240" class="subtitle">API Gateway & Load Balancer</text>
<rect x="200" y="250" width="600" height="40" class="service"/>
<text x="500" y="272" text-anchor="middle" class="label">Nginx + Rate Limiting + SSL Termination</text>
<!-- MCP Server Cluster -->
<rect x="50" y="340" width="900" height="180" class="container"/>
<text x="70" y="360" class="subtitle">Cluster de Servidores MCP</text>
<rect x="100" y="380" width="150" height="60" class="service"/>
<text x="175" y="400" text-anchor="middle" class="label">MCP Server 1</text>
<text x="175" y="415" text-anchor="middle" class="small-label">Tools & Resources</text>
<text x="175" y="430" text-anchor="middle" class="small-label">Docker Container</text>
<rect x="280" y="380" width="150" height="60" class="service"/>
<text x="355" y="400" text-anchor="middle" class="label">MCP Server 2</text>
<text x="355" y="415" text-anchor="middle" class="small-label">Auth & Security</text>
<text x="355" y="430" text-anchor="middle" class="small-label">Docker Container</text>
<rect x="460" y="380" width="150" height="60" class="service"/>
<text x="535" y="400" text-anchor="middle" class="label">MCP Server 3</text>
<text x="535" y="415" text-anchor="middle" class="small-label">Data Processing</text>
<text x="535" y="430" text-anchor="middle" class="small-label">Docker Container</text>
<rect x="640" y="380" width="150" height="60" class="service"/>
<text x="715" y="400" text-anchor="middle" class="label">MCP Server N</text>
<text x="715" y="415" text-anchor="middle" class="small-label">Specialized Logic</text>
<text x="715" y="430" text-anchor="middle" class="small-label">Docker Container</text>
<!-- Monitoring -->
<rect x="100" y="460" width="690" height="40" class="component"/>
<text x="445" y="482" text-anchor="middle" class="label">Monitoring: Prometheus + Grafana + Jaeger Tracing</text>
<!-- Data Layer -->
<rect x="50" y="560" width="900" height="100" class="container"/>
<text x="70" y="580" class="subtitle">Capa de Datos y Servicios Externos</text>
<rect x="100" y="600" width="120" height="40" class="database"/>
<text x="160" y="622" text-anchor="middle" class="label">PostgreSQL</text>
<rect x="250" y="600" width="120" height="40" class="database"/>
<text x="310" y="622" text-anchor="middle" class="label">Redis Cache</text>
<rect x="400" y="600" width="120" height="40" class="external"/>
<text x="460" y="622" text-anchor="middle" class="label">External APIs</text>
<rect x="550" y="600" width="120" height="40" class="external"/>
<text x="610" y="622" text-anchor="middle" class="label">File Storage</text>
<rect x="700" y="600" width="120" height="40" class="external"/>
<text x="760" y="622" text-anchor="middle" class="label">Message Queue</text>
<!-- Flow Lines -->
<line x1="160" y1="160" x2="160" y2="250" class="flow"/>
<line x1="310" y1="160" x2="310" y2="250" class="flow"/>
<line x1="460" y1="160" x2="460" y2="250" class="flow"/>
<line x1="610" y1="160" x2="610" y2="250" class="flow"/>
<line x1="500" y1="290" x2="500" y2="380" class="flow"/>
<line x1="175" y1="440" x2="175" y2="600" class="flow"/>
<line x1="355" y1="440" x2="355" y2="600" class="flow"/>
<line x1="535" y1="440" x2="535" y2="600" class="flow"/>
<line x1="715" y1="440" x2="715" y2="600" class="flow"/>
</svg>
