<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="800" height="600" fill="#0f172a"/>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="24" font-weight="bold" fill="#f8fafc">Cache Multi-Nivel en MCP Server</text>
<!-- Client Level -->
<rect x="50" y="80" width="120" height="60" rx="10" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
<text x="110" y="100" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="white">Cliente MCP</text>
<text x="110" y="115" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="white">Cache L1</text>
<!-- Application Cache -->
<rect x="250" y="80" width="120" height="60" rx="10" fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>
<text x="310" y="100" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="white">Aplicación</text>
<text x="310" y="115" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="white">Cache L2</text>
<!-- Distributed Cache -->
<rect x="450" y="80" width="120" height="60" rx="10" fill="#9b59b6" stroke="#8e44ad" stroke-width="2"/>
<text x="510" y="100" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="white">Redis/Memcached</text>
<text x="510" y="115" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="white">Cache L3</text>
<!-- Database -->
<rect x="650" y="80" width="120" height="60" rx="10" fill="#27ae60" stroke="#229954" stroke-width="2"/>
<text x="710" y="100" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="white">Base de Datos</text>
<text x="710" y="115" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="white">Fuente</text>
<!-- Arrows -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>
</defs>
<!-- Request Flow -->
<line x1="170" y1="100" x2="240" y2="100" stroke="#34495e" stroke-width="2" marker-end="url(#arrowhead)"/>
<line x1="370" y1="100" x2="440" y2="100" stroke="#34495e" stroke-width="2" marker-end="url(#arrowhead)"/>
<line x1="570" y1="100" x2="640" y2="100" stroke="#34495e" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Response Flow -->
<line x1="640" y1="120" x2="570" y2="120" stroke="#e67e22" stroke-width="2" marker-end="url(#arrowhead)"/>
<line x1="440" y1="120" x2="370" y2="120" stroke="#e67e22" stroke-width="2" marker-end="url(#arrowhead)"/>
<line x1="240" y1="120" x2="170" y2="120" stroke="#e67e22" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Cache Hit/Miss Labels -->
<text x="205" y="90" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="#64748b">Hit/Miss</text>
<text x="405" y="90" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="#64748b">Hit/Miss</text>
<text x="605" y="90" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="#64748b">Hit/Miss</text>
<!-- Cache Strategies -->
<rect x="50" y="200" width="700" height="350" rx="10" fill="white" stroke="#bdc3c7" stroke-width="2"/>
<text x="400" y="230" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="18" font-weight="bold" fill="#f8fafc">Estrategias de Cache</text>
<!-- Cache-Aside -->
<rect x="80" y="260" width="150" height="80" rx="5" fill="#ecf0f1" stroke="#95a5a6" stroke-width="1"/>
<text x="155" y="280" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="14" font-weight="bold" fill="#f8fafc">Cache-Aside</text>
<text x="155" y="300" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">Aplicación gestiona</text>
<text x="155" y="315" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">cache manualmente</text>
<text x="155" y="330" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">Control total</text>
<!-- Write-Through -->
<rect x="260" y="260" width="150" height="80" rx="5" fill="#ecf0f1" stroke="#95a5a6" stroke-width="1"/>
<text x="335" y="280" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="14" font-weight="bold" fill="#f8fafc">Write-Through</text>
<text x="335" y="300" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">Escribe en cache y</text>
<text x="335" y="315" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">DB simultáneamente</text>
<text x="335" y="330" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">Consistencia fuerte</text>
<!-- Write-Behind -->
<rect x="440" y="260" width="150" height="80" rx="5" fill="#ecf0f1" stroke="#95a5a6" stroke-width="1"/>
<text x="515" y="280" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="14" font-weight="bold" fill="#f8fafc">Write-Behind</text>
<text x="515" y="300" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">Escribe en cache</text>
<text x="515" y="315" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">DB asíncrono</text>
<text x="515" y="330" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">Mayor performance</text>
<!-- Cache Invalidation -->
<text x="400" y="380" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="16" font-weight="bold" fill="#f8fafc">Estrategias de Invalidación</text>
<!-- TTL -->
<rect x="80" y="400" width="100" height="60" rx="5" fill="#f39c12" stroke="#e67e22" stroke-width="1"/>
<text x="130" y="420" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" font-weight="bold" fill="white">TTL</text>
<text x="130" y="435" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Time To Live</text>
<text x="130" y="450" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Expira automático</text>
<!-- LRU -->
<rect x="210" y="400" width="100" height="60" rx="5" fill="#e74c3c" stroke="#c0392b" stroke-width="1"/>
<text x="260" y="420" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" font-weight="bold" fill="white">LRU</text>
<text x="260" y="435" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Least Recently</text>
<text x="260" y="450" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Used</text>
<!-- LFU -->
<rect x="340" y="400" width="100" height="60" rx="5" fill="#9b59b6" stroke="#8e44ad" stroke-width="1"/>
<text x="390" y="420" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" font-weight="bold" fill="white">LFU</text>
<text x="390" y="435" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Least Frequently</text>
<text x="390" y="450" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Used</text>
<!-- Manual -->
<rect x="470" y="400" width="100" height="60" rx="5" fill="#27ae60" stroke="#229954" stroke-width="1"/>
<text x="520" y="420" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" font-weight="bold" fill="white">Manual</text>
<text x="520" y="435" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Event-driven</text>
<text x="520" y="450" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Invalidation</text>
<!-- Event-based -->
<rect x="600" y="400" width="100" height="60" rx="5" fill="#64748b" stroke="#f8fafc" stroke-width="1"/>
<text x="650" y="420" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" font-weight="bold" fill="white">Event-based</text>
<text x="650" y="435" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Tag-based</text>
<text x="650" y="450" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="10" fill="white">Invalidation</text>
<!-- Performance Metrics -->
<text x="400" y="500" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="14" font-weight="bold" fill="#f8fafc">Métricas Clave de Performance</text>
<text x="200" y="520" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="#64748b">Hit Ratio: 95%+</text>
<text x="400" y="520" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="#64748b">Latency: <1ms</text>
<text x="600" y="520" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="#64748b">Memory Usage: <80%</text>
</svg>
