Diagrama de Arquitetura: E-commerce (Tela vs. Banco)
graph TD;
classDef tela fill:#e7f1ff,stroke:#007bff,stroke-width:2px;
classDef acao fill:#fff,stroke:#555,stroke-width:2px,stroke-dasharray: 5 5;
classDef backend fill:#f0f0f0,stroke:#666,stroke-width:2px;
classDef collection fill:#d4edda,stroke:#28a745,stroke-width:2px;
classDef decisao fill:#fffbe6,stroke:#ffc107,stroke-width:2px;
classDef externo fill:#e2d9f3,stroke:#8a63d2,stroke-width:2px;
subgraph "1. Navegação e Descoberta"
T1[🖥️ Tela: Home/Categorias]:::tela;
B1[⚙️ Back-end: Busca Produtos]:::backend;
C1[🗄️ Collection: Produtos]:::collection;
T2[🖥️ Tela: Detalhe do Produto]:::tela;
T1 --> B1;
B1 --> C1;
C1 --> B1;
B1 --> T1;
T1 --> T2;
end
subgraph "2. Adicionar ao Carrinho"
A1[🖱️ Ação: Clicar em 'Adicionar']:::acao;
B2[⚙️ Back-end: Lógica do Carrinho]:::backend;
C2[🗄️ Collection: Carrinhos]:::collection;
T2 --> A1;
A1 --> B2;
B2 --> C1;
B2 --> C2;
B2 --> T2;
end
subgraph "3. Início do Checkout"
T3[🖥️ Tela: Carrinho]:::tela;
A2[🖱️ Ação: Clicar em 'Finalizar Compra']:::acao;
T4[🖥️ Tela: Formulário de Checkout]:::tela;
B3[⚙️ Back-end: Busca dados do Usuário]:::backend;
C3[🗄️ Collection: Usuarios]:::collection;
T2 --> T3;
T3 --> A2;
A2 --> T4;
T4 --> B3;
B3 --> C3;
C3 --> B3;
B3 --> T4;
end
subgraph "4. Processamento do Pagamento"
A3[🖱️ Ação: Clicar em 'PAGAR']:::acao;
B4[⚙️ Back-end: Orquestrador da Transação]:::backend;
C4[🗄️ Collection: Pedidos]:::collection;
E1[🌐 Sistema Externo: Gateway de Pagamento]:::externo;
D1{Pagamento Aprovado?}:::decisao;
T4 --> A3;
A3 --> B4;
B4 --> C4;
B4 --> E1;
E1 --> B4;
B4 --> D1;
end
subgraph "5. Finalização do Pedido"
direction LR
subgraph CaminhoSucesso
B5_S[⚙️ Sucesso]:::backend;
B5_S --> C4;
B5_S --> C1;
B5_S --> C2;
T5_S[🖥️ Tela: Pedido Confirmado]:::tela;
E2[📧 Sistema Externo: Envio de E-mail]:::externo;
B5_S --> T5_S;
B5_S --> E2;
end
subgraph CaminhoFalha
B5_F[⚙️ Falha]:::backend;
T5_F[🖥️ Tela: Erro no Checkout]:::tela;
B5_F --> C4;
B5_F --> T5_F;
end
D1 --> B5_S;
D1 --> B5_F;
end