dev-workflows/skills/wf-architecture/references/c4.md

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

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

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

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.