trello_fake/presentaciones/levi/capturas/diagrama.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 320" width="100%" height="100%">
  <defs>
    <!-- Filtro para sombra suave y profesional -->
    <filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#0f172a" flood-opacity="0.05" />
    </filter>

    <!-- Punta de flecha para el flujo de datos -->
    <marker id="arrowhead" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto">
      <path d="M 0 1 L 9 5 L 0 9 z" fill="#94a3b8" />
    </marker>
  </defs>

  <!-- Fondo base (opcional, asegura que se vea bien en fondos oscuros) -->
  <rect width="1080" height="320" fill="#ffffff" rx="16" />

  <style>
    /* Estilos globales */
    .box { fill: #ffffff; stroke: #e2e8f0; stroke-width: 2px; rx: 16px; ry: 16px; filter: url(#soft-shadow); }
    .box:hover { stroke: #3b82f6; }
    
    .icon-bg { fill: #eff6ff; }
    .icon { fill: none; stroke: #2563eb; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    
    .arrow { stroke: #94a3b8; stroke-width: 3.5; fill: none; marker-end: url(#arrowhead); }
    
    /* Tipografía moderna y limpia */
    text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    .title { font-size: 16px; font-weight: 600; fill: #1e293b; text-anchor: middle; }
    .subtitle { font-size: 14px; font-weight: 400; fill: #64748b; text-anchor: middle; }
    .subtitle-path { font-size: 12px; font-weight: 500; fill: #3b82f6; text-anchor: middle; }
    
    .footer-bg { fill: #f8fafc; stroke: #f1f5f9; stroke-width: 1px; rx: 8px; }
    .footer-text { font-size: 15px; font-weight: 500; fill: #475569; text-anchor: middle; }
  </style>

  <!-- ========================================== -->
  <!-- 1. UI (Next.js) -->
  <!-- ========================================== -->
  <g transform="translate(50, 60)">
    <rect width="200" height="150" class="box" />
    <circle cx="100" cy="55" r="28" class="icon-bg" />
    <!-- Icono Navegador -->
    <g transform="translate(86, 41)">
      <rect x="2" y="4" width="24" height="20" rx="3" ry="3" class="icon" />
      <line x1="2" y1="11" x2="26" y2="11" class="icon" />
      <circle cx="6" cy="7.5" r="1.5" fill="#2563eb" stroke="none" />
      <circle cx="11" cy="7.5" r="1.5" fill="#2563eb" stroke="none" />
    </g>
    <text x="100" y="115" class="title">UI (Next.js)</text>
    <text x="100" y="135" class="subtitle">Frontend / Dashboard</text>
  </g>

  <!-- Flecha 1 -->
  <line x1="250" y1="135" x2="306" y2="135" class="arrow" />

  <!-- ========================================== -->
  <!-- 2. API Proxy -->
  <!-- ========================================== -->
  <g transform="translate(310, 60)">
    <rect width="200" height="150" class="box" />
    <circle cx="100" cy="55" r="28" class="icon-bg" />
    <!-- Icono Escudo -->
    <g transform="translate(86, 41)">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" class="icon" />
    </g>
    <text x="100" y="108" class="title">API Proxy</text>
    <text x="100" y="126" class="subtitle-path">/api/dolibarr/...</text>
    <text x="100" y="144" class="subtitle">Protege API key</text>
  </g>

  <!-- Flecha 2 -->
  <line x1="510" y1="135" x2="566" y2="135" class="arrow" />

  <!-- ========================================== -->
  <!-- 3. Dolibarr (ERP) -->
  <!-- ========================================== -->
  <g transform="translate(570, 60)">
    <rect width="200" height="150" class="box" />
    <circle cx="100" cy="55" r="28" class="icon-bg" />
    <!-- Icono Servidor -->
    <g transform="translate(86, 41)">
      <rect x="2" y="3" width="24" height="10" rx="2" ry="2" class="icon" />
      <rect x="2" y="15" width="24" height="10" rx="2" ry="2" class="icon" />
      <line x1="6" y1="8" x2="6.01" y2="8" stroke-width="3" stroke="#2563eb" stroke-linecap="round" />
      <line x1="6" y1="20" x2="6.01" y2="20" stroke-width="3" stroke="#2563eb" stroke-linecap="round" />
    </g>
    <text x="100" y="115" class="title">Dolibarr</text>
    <text x="100" y="135" class="subtitle">ERP / API REST</text>
  </g>

  <!-- Flecha 3 -->
  <line x1="770" y1="135" x2="826" y2="135" class="arrow" />

  <!-- ========================================== -->
  <!-- 4. MariaDB -->
  <!-- ========================================== -->
  <g transform="translate(830, 60)">
    <rect width="200" height="150" class="box" />
    <circle cx="100" cy="55" r="28" class="icon-bg" />
    <!-- Icono Base de Datos -->
    <g transform="translate(86, 41)">
      <ellipse cx="14" cy="6" rx="10" ry="4" class="icon" />
      <path d="M24 13c0 2.2-4.5 4-10 4S4 15.2 4 13" class="icon" />
      <path d="M4 6v14c0 2.2 4.5 4 10 4s10-1.8 10-4V6" class="icon" />
    </g>
    <text x="100" y="115" class="title">MariaDB</text>
    <text x="100" y="135" class="subtitle">Datos persistentes</text>
  </g>

  <!-- ========================================== -->
  <!-- Texto Explicativo Inferior -->
  <!-- ========================================== -->
  <g transform="translate(50, 245)">
    <rect width="980" height="44" class="footer-bg" />
    <text x="490" y="27" class="footer-text">
      La UI nunca toca directamente el ERP; pasa por el proxy que añade la API key.
    </text>
  </g>
</svg>