3. Contexto (C4 nível 1)

O diagrama de contexto é o “zoom mais afastado” do modelo C4: mostra o sistema como uma caixa única, as pessoas que o usam e os sistemas externos com que ele conversa.

flowchart TB
    prof["👩‍⚕️ Profissional prescritor<br/><small>fisioterapeuta, médico, podólogo, ortesista…</small>"]
    adm["🏭 Equipe da fábrica<br/><small>administradores</small>"]

    subgraph moldape [" "]
      sys["<b>Plataforma Moldapé</b><br/><small>estúdio de criação, compra e<br/>gestão de pedidos de órteses</small>"]
    end

    pay["💳 InfinitePay<br/><small>checkout e webhook de pagamento</small>"]
    smtp["✉️ Servidor SMTP<br/><small>e-mails transacionais</small>"]
    cf["☁️ Cloudflare<br/><small>DNS, TLS, CDN</small>"]

    prof -- "cria rascunhos, compra,<br/>acompanha pedidos (HTTPS)" --> sys
    adm -- "gerencia catálogo, pedidos,<br/>acessos (HTTPS)" --> sys
    sys -- "cria link de checkout (HTTPS/JSON)" --> pay
    pay -- "notifica pagamento (webhook)" --> sys
    sys -- "envia e-mails (SMTP)" --> smtp
    smtp -. "e-mail" .-> prof
    cf -. "proxy de borda" .- sys

    classDef person fill:#361548,color:#fff,stroke:#361548
    classDef system fill:#b31f1d,color:#fff,stroke:#7a1513
    classDef ext fill:#eeeaf1,color:#2b1f33,stroke:#9d91a4
    class prof,adm person
    class sys system
    class pay,smtp,cf ext
    style moldape fill:none,stroke:none

Interfaces externas

Vizinho	Direção	Protocolo	Para quê	Onde no código
InfinitePay	saída	HTTPS POST /invoices/public/checkout/links	Criar link de pagamento (valor em centavos, itens, endereço, redirect_url, webhook_url)	order-lifecycle/.../payment-service.ts
InfinitePay	entrada	HTTPS POST /api/webhook (Next.js)	Receber confirmação e marcar o pedido como PAID	web/src/app/api/webhook/route.ts
SMTP	saída	SMTP (Nodemailer)	Redefinição de senha, confirmação, status, pedido pronto	packages/email
Cloudflare	borda	DNS / proxy HTTPS	Domínios moldape.com e api.moldape.com	infraestrutura