<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.bg { fill: #1a1a1a; }
.monolith-box { fill: #4a2c2a; stroke: #ff6b6b; stroke-width: 3; }
.micro-box { fill: #2a4a2c; stroke: #4caf50; stroke-width: 2; }
.api-gateway { fill: #2d4a8a; stroke: #4a90e2; stroke-width: 2; }
.connection { fill: none; stroke: #666666; stroke-width: 2; stroke-dasharray: 5,5; }
.data-flow { fill: none; stroke: #4caf50; stroke-width: 3; marker-end: url(#arrowhead); }
.title { fill: #0f172a; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: bold; text-anchor: middle; }
.subtitle { fill: #cccccc; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: bold; text-anchor: middle; }
.service-text { fill: #0f172a; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: bold; text-anchor: middle; }
.benefit-text { fill: #4caf50; font-family: Inter, system-ui, sans-serif; font-size: 11px; }
.challenge-text { fill: #ff6b6b; font-family: Inter, system-ui, sans-serif; font-size: 11px; }
.vs-text { fill: #ffd700; font-family: Inter, system-ui, sans-serif; font-size: 32px; font-weight: bold; text-anchor: middle; }
</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="#4caf50" />
</marker>
</defs>
<!-- Background -->
<rect class="bg" width="1200" height="800"/>
<!-- Title -->
<text class="title" x="600" y="40">Evolución: Monolito MCP → Microservicios MCP</text>
<!-- VS indicator -->
<text class="vs-text" x="600" y="400">VS</text>
<!-- MONOLITHIC SIDE -->
<text class="subtitle" x="200" y="80" fill="#ff6b6b">Servidor MCP Monolítico</text>
<!-- Single monolithic server -->
<rect class="monolith-box" x="50" y="100" width="300" height="250" rx="15"/>
<text class="service-text" x="200" y="130">🎯 MCP Server "Todo-en-Uno"</text>
<!-- Monolith components -->
<rect fill="#6a3a3a" stroke="#888" stroke-width="1" x="70" y="150" width="260" height="30" rx="5"/>
<text class="service-text" x="200" y="170" font-size="10">🧮 Calculadora + 📁 Archivos + 🌐 APIs + 📊 Datos</text>
<rect fill="#6a3a3a" stroke="#888" stroke-width="1" x="70" y="190" width="260" height="30" rx="5"/>
<text class="service-text" x="200" y="210" font-size="10">🔐 Auth + 📝 Logs + 📊 Métricas + 🔍 Traces</text>
<rect fill="#6a3a3a" stroke="#888" stroke-width="1" x="70" y="230" width="260" height="30" rx="5"/>
<text class="service-text" x="200" y="250" font-size="10">🎨 UI + 🔧 Config + 📈 Analytics + 💾 Cache</text>
<rect fill="#6a3a3a" stroke="#888" stroke-width="1" x="70" y="270" width="260" height="30" rx="5"/>
<text class="service-text" x="200" y="290" font-size="10">📧 Notifications + 🕐 Scheduler + 🔄 Workflows</text>
<rect fill="#6a3a3a" stroke="#888" stroke-width="1" x="70" y="310" width="260" height="30" rx="5"/>
<text class="service-text" x="200" y="330" font-size="10">💾 Database + 🌍 External APIs</text>
<!-- Monolith challenges -->
<text class="subtitle" x="200" y="380" fill="#ff6b6b">Desafíos del Monolito:</text>
<text class="challenge-text" x="70" y="400">❌ Deployment de todo o nada</text>
<text class="challenge-text" x="70" y="420">❌ Escalamiento inflexible</text>
<text class="challenge-text" x="70" y="440">❌ Tecnología única para todo</text>
<text class="challenge-text" x="70" y="460">❌ Punto único de falla</text>
<text class="challenge-text" x="70" y="480">❌ Teams acoplados</text>
<text class="challenge-text" x="70" y="500">❌ Testing complejo</text>
<!-- MICROSERVICES SIDE -->
<text class="subtitle" x="1000" y="80" fill="#4caf50">Arquitectura de Microservicios MCP</text>
<!-- API Gateway -->
<rect class="api-gateway" x="850" y="100" width="300" height="40" rx="10"/>
<text class="service-text" x="1000" y="125">🚪 API Gateway MCP</text>
<!-- Individual Microservices -->
<!-- Calculator Service -->
<rect class="micro-box" x="750" y="170" width="120" height="80" rx="8"/>
<text class="service-text" x="810" y="195">🧮 Calculator</text>
<text class="service-text" x="810" y="210">Service</text>
<text class="service-text" x="810" y="230" font-size="10">FastAPI</text>
<text class="service-text" x="810" y="245" font-size="10">+ NumPy</text>
<!-- File Service -->
<rect class="micro-box" x="890" y="170" width="120" height="80" rx="8"/>
<text class="service-text" x="950" y="195">📁 File</text>
<text class="service-text" x="950" y="210">Service</text>
<text class="service-text" x="950" y="230" font-size="10">Go + MinIO</text>
<!-- API Aggregator -->
<rect class="micro-box" x="1030" y="170" width="120" height="80" rx="8"/>
<text class="service-text" x="1090" y="195">🌐 API</text>
<text class="service-text" x="1090" y="210">Aggregator</text>
<text class="service-text" x="1090" y="230" font-size="10">Node.js</text>
<!-- Auth Service -->
<rect class="micro-box" x="750" y="270" width="120" height="80" rx="8"/>
<text class="service-text" x="810" y="295">🔐 Auth</text>
<text class="service-text" x="810" y="310">Service</text>
<text class="service-text" x="810" y="330" font-size="10">Rust</text>
<text class="service-text" x="810" y="345" font-size="10">+ JWT</text>
<!-- Analytics Service -->
<rect class="micro-box" x="890" y="270" width="120" height="80" rx="8"/>
<text class="service-text" x="950" y="295">📊 Analytics</text>
<text class="service-text" x="950" y="310">Service</text>
<text class="service-text" x="950" y="330" font-size="10">Python</text>
<text class="service-text" x="950" y="345" font-size="10">+ ML</text>
<!-- Notification Service -->
<rect class="micro-box" x="1030" y="270" width="120" height="80" rx="8"/>
<text class="service-text" x="1090" y="295">📧 Notification</text>
<text class="service-text" x="1090" y="310">Service</text>
<text class="service-text" x="1090" y="330" font-size="10">Kafka</text>
<!-- Data connections -->
<path class="data-flow" d="M 1000 140 L 810 170"/>
<path class="data-flow" d="M 1000 140 L 950 170"/>
<path class="data-flow" d="M 1000 140 L 1090 170"/>
<path class="data-flow" d="M 1000 140 L 810 270"/>
<path class="data-flow" d="M 1000 140 L 950 270"/>
<path class="data-flow" d="M 1000 140 L 1090 270"/>
<!-- Microservices benefits -->
<text class="subtitle" x="1000" y="380" fill="#4caf50">Beneficios de Microservicios:</text>
<text class="benefit-text" x="770" y="400">✅ Deployment independiente</text>
<text class="benefit-text" x="770" y="420">✅ Escalamiento granular</text>
<text class="benefit-text" x="770" y="440">✅ Tecnología por servicio</text>
<text class="benefit-text" x="770" y="460">✅ Fault isolation</text>
<text class="benefit-text" x="770" y="480">✅ Teams autónomos</text>
<text class="benefit-text" x="770" y="500">✅ Testing independiente</text>
<!-- Shared Infrastructure -->
<text class="subtitle" x="600" y="550" fill="#4a90e2">Infraestructura Compartida</text>
<rect fill="#2d4a8a" stroke="#4a90e2" stroke-width="2" x="200" y="570" width="150" height="60" rx="8"/>
<text class="service-text" x="275" y="590">🔍 Observabilidad</text>
<text class="service-text" x="275" y="605">Prometheus + Jaeger</text>
<text class="service-text" x="275" y="620">+ Grafana</text>
<rect fill="#2d4a8a" stroke="#4a90e2" stroke-width="2" x="375" y="570" width="150" height="60" rx="8"/>
<text class="service-text" x="450" y="590">🗄️ Message Queue</text>
<text class="service-text" x="450" y="605">Apache Kafka</text>
<text class="service-text" x="450" y="620">+ Redis</text>
<rect fill="#2d4a8a" stroke="#4a90e2" stroke-width="2" x="550" y="570" width="150" height="60" rx="8"/>
<text class="service-text" x="625" y="590">🏗️ Service Mesh</text>
<text class="service-text" x="625" y="605">Istio</text>
<text class="service-text" x="625" y="620">+ Envoy</text>
<rect fill="#2d4a8a" stroke="#4a90e2" stroke-width="2" x="725" y="570" width="150" height="60" rx="8"/>
<text class="service-text" x="800" y="590">🔧 Config</text>
<text class="service-text" x="800" y="605">Consul</text>
<text class="service-text" x="800" y="620">+ Vault</text>
<rect fill="#2d4a8a" stroke="#4a90e2" stroke-width="2" x="900" y="570" width="150" height="60" rx="8"/>
<text class="service-text" x="975" y="590">☁️ Orchestration</text>
<text class="service-text" x="975" y="605">Kubernetes</text>
<text class="service-text" x="975" y="620">+ Docker</text>
<!-- Key differences box -->
<rect fill="#3d3d3d" stroke="#888" stroke-width="2" x="400" y="650" width="400" height="120" rx="10"/>
<text class="subtitle" x="600" y="675" fill="#ffd700">Decisión Clave: ¿Cuándo Migrar?</text>
<text class="service-text" x="420" y="700" font-size="11">🎯 Monolito: < 5 herramientas, 1-2 developers, MVP/prototipo</text>
<text class="service-text" x="420" y="720" font-size="11">🏗️ Microservicios: > 10 herramientas, multiple teams, scale requirements</text>
<text class="service-text" x="420" y="740" font-size="11">⚖️ Híbrido: Modular monolith → selective decomposition</text>
<text class="service-text" x="420" y="760" font-size="11">🚀 La complejidad debe justificar los beneficios</text>
</svg>
