# C4 em Mermaid Regras: até 20 elementos por view, toda seta com rótulo (o que trafega e por qual protocolo), IDs estáveis reaproveitados em ADRs e no threat model, declaração na ordem de leitura (de quem usa para o que é usado). ## Context ```mermaid C4Context title Contexto: Sistema de Pedidos Person(cliente, "Cliente", "Compra pelo site") System(pedidos, "Sistema de Pedidos", "Cria e acompanha pedidos") System_Ext(pagamento, "Gateway de pagamento", "Cobra o cartão") Rel(cliente, pedidos, "Cria pedido", "HTTPS") Rel(pedidos, pagamento, "Autoriza cobrança", "HTTPS/REST") ``` ## Container ```mermaid C4Container title Containers: Sistema de Pedidos Person(cliente, "Cliente") System_Boundary(sp, "Sistema de Pedidos") { Container(web, "Web", "Next.js", "Interface") Container(api, "API", "FastAPI", "Regras de pedido") ContainerDb(db, "Banco", "PostgreSQL", "Pedidos e itens") Container(worker, "Worker", "Celery", "Cobrança assíncrona") } System_Ext(pagamento, "Gateway de pagamento") Rel(cliente, web, "Usa", "HTTPS") Rel(web, api, "Chama", "HTTPS/JSON") Rel(api, db, "Lê e grava", "SQL/TLS") Rel(api, worker, "Enfileira cobrança", "Redis") Rel(worker, pagamento, "Autoriza", "HTTPS") ``` ## Render ```bash npx -y @mermaid-js/mermaid-cli -i docs/architecture/c4.mmd -o /tmp/c4.svg ``` Se o comando falhar, o diagrama tem erro de sintaxe e não está pronto.