<svg viewBox="0 0 900 420" xmlns="http://www.w3.org/2000/svg" font-family="Arial, Helvetica, sans-serif">
  <rect x="0" y="0" width="900" height="420" fill="#ffffff"/>

  <!-- User box -->
  <rect x="30" y="160" width="150" height="90" rx="10" fill="#e7f7ee" stroke="#25b26a" stroke-width="2"/>
  <text x="105" y="200" text-anchor="middle" font-size="15" fill="#12693f" font-weight="bold">Usuário</text>
  <text x="105" y="220" text-anchor="middle" font-size="13" fill="#12693f">WhatsApp</text>

  <!-- Meta Cloud box -->
  <rect x="290" y="90" width="230" height="230" rx="10" fill="#eaf1fb" stroke="#2f6fce" stroke-width="2"/>
  <text x="405" y="120" text-anchor="middle" font-size="15" fill="#1b4a8f" font-weight="bold">Meta Cloud API</text>
  <rect x="315" y="140" width="180" height="55" rx="8" fill="#ffffff" stroke="#2f6fce" stroke-width="1.5"/>
  <text x="405" y="163" text-anchor="middle" font-size="12.5" fill="#1b4a8f">Webhook</text>
  <text x="405" y="180" text-anchor="middle" font-size="11" fill="#1b4a8f">envia eventos (POST)</text>
  <rect x="315" y="215" width="180" height="55" rx="8" fill="#ffffff" stroke="#2f6fce" stroke-width="1.5"/>
  <text x="405" y="238" text-anchor="middle" font-size="12.5" fill="#1b4a8f">Graph API</text>
  <text x="405" y="255" text-anchor="middle" font-size="11" fill="#1b4a8f">recebe envio (POST /messages)</text>

  <!-- Backend box -->
  <rect x="600" y="120" width="180" height="90" rx="10" fill="#fdf1e3" stroke="#c9791f" stroke-width="2"/>
  <text x="690" y="155" text-anchor="middle" font-size="15" fill="#8a5211" font-weight="bold">Seu Backend</text>
  <text x="690" y="175" text-anchor="middle" font-size="12" fill="#8a5211">valida assinatura</text>
  <text x="690" y="192" text-anchor="middle" font-size="12" fill="#8a5211">processa a lógica</text>

  <!-- Optional CRM/LLM box -->
  <rect x="600" y="250" width="180" height="80" rx="10" fill="#f4eefc" stroke="#7c3aed" stroke-width="2"/>
  <text x="690" y="278" text-anchor="middle" font-size="13.5" fill="#5b21b6" font-weight="bold">CRM / LLM</text>
  <text x="690" y="297" text-anchor="middle" font-size="11.5" fill="#5b21b6">(opcional)</text>

  <!-- Arrows -->
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#555"/>
    </marker>
  </defs>

  <line x1="180" y1="190" x2="288" y2="167" stroke="#555" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="225" y="175" font-size="10.5" fill="#555">1. mensagem</text>

  <line x1="495" y1="167" x2="598" y2="160" stroke="#555" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="500" y="150" font-size="10.5" fill="#555">2. evento webhook</text>

  <line x1="690" y1="210" x2="690" y2="248" stroke="#555" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="700" y="232" font-size="10.5" fill="#555">3. consulta</text>

  <line x1="598" y1="190" x2="497" y2="235" stroke="#555" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="500" y="220" font-size="10.5" fill="#555">4. resposta</text>

  <line x1="313" y1="242" x2="182" y2="205" stroke="#555" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="200" y="255" font-size="10.5" fill="#555">5. entrega ao usuário</text>

  <text x="450" y="370" text-anchor="middle" font-size="12" fill="#888">Nenhum servidor de terceiros (BSP) no meio do fluxo</text>
</svg>
