Pular para o conteúdo
cfourdev cfourdev

Diagrama de containers

O diagrama de containers abre um sistema e mostra de que partes executáveis ele é feito: aplicações, serviços, bancos, filas, processos agendados.

No C4, container não significa Docker. É qualquer coisa que executa ou guarda dados separadamente.

O que muda no modelo

Seção intitulada “O que muda no modelo”

Cada container é uma caixa nova com parent apontando para o sistema. É o parent que a põe no nível container.

model/reservas/containers.yaml
elements:
  - id: painel
    name: Painel de Reservas
    shape: browser
    parent: reservas
    technology: React
    description: Onde a pessoa procura uma sala livre e confirma a reserva.


  - id: api
    name: API de Reservas
    shape: api
    parent: reservas
    technology: Node.js
    description: Onde moram as regras — conflito de horario, limite e confirmacao.


  - id: banco
    name: Base de Reservas
    shape: database
    parent: reservas
    technology: PostgreSQL
    description: Salas, reservas e participantes.


  - id: fila-de-sincronizacao
    name: Fila de Sincronizacao
    shape: queue
    parent: reservas
    technology: Amazon SQS
    description: Uma mensagem por reserva confirmada.


  - id: sincronizador
    name: Sincronizador de Agenda
    shape: container
    parent: reservas
    technology: Node.js
    description: Le a fila e cria o evento correspondente na agenda corporativa.


relations:
  - from: colaborador
    to: painel
    kind: sync
    label: Procura e reserva


  - from: painel
    to: api
    kind: sync
    label: Chama


  - from: api
    to: banco
    kind: sync
    label: Le e grava


  - from: api
    to: fila-de-sincronizacao
    kind: async
    label: Enfileira a reserva confirmada


  - from: fila-de-sincronizacao
    to: sincronizador
    kind: async
    label: Entrega a reserva


  - from: sincronizador
    to: agenda-corporativa
    kind: sync
    label: Cria o evento

As setas desceram junto

Seção intitulada “As setas desceram junto”

Repare no que saiu do arquivo do contexto: as duas relações que estavam lá — colaborador → reservas e reservas → agenda-corporativa — foram reescritas aqui como colaborador → painel e sincronizador → agenda-corporativa.

Isso não deixa o diagrama de contexto incompleto. Ele continua desenhando as mesmas duas setas, porque cada ponta é projetada na caixa mais próxima que aquele desenho está mostrando — e no contexto, tanto o painel quanto o sincronizador estão dentro de reservas.

É por isso que uma integração é escrita uma vez só, no nível mais fino que você conhece.

O diagrama

Seção intitulada “O diagrama”
model/reservas/containers-diagrama.yaml
kind: diagram
id: containers
title: Reserva de Salas — Containers
level: container
scope: reservas
order: 20
neighbors: 1
relations: auto

Duas linhas fazem o trabalho:

scope: reservas — abre aquela caixa por dentro. Ela vira a fronteira do desenho: uma moldura com o nome dela, e tudo que estiver dentro pertence a ela. No leitor, descer para dentro de reservas abre este diagrama.

A ausência de include — quando há scope e não há include, o padrão é mostrar os filhos diretos do escopo. É isso que faz um container novo entrar sozinho: você cria o arquivo com parent: reservas e ele aparece aqui, sem editar este documento.

neighbors: 1 — puxa quem está a um salto de distância como contexto mudo, fora da fronteira. Aqui isso traz o Colaborador e a Agenda Corporativa, para o desenho não parecer que o sistema conversa com o nada.

O que aparece de fato

Seção intitulada “O que aparece de fato”
7 caixa(s), 6 seta(s)


  reservas/painel                 dentro    children:reservas/reservas
  reservas/api                    dentro    children:reservas/reservas
  reservas/banco                  dentro    children:reservas/reservas
  reservas/fila-de-sincronizacao  dentro    children:reservas/reservas
  reservas/sincronizador          dentro    children:reservas/reservas
  reservas/colaborador            contexto  neighbors: 1
  reservas/agenda-corporativa     contexto  neighbors: 1

Dentro significa dentro da fronteira; contexto significa trazido pelo anel de vizinhos, e desenhado esmaecido.

Tecnologia é um campo, não um rótulo solto

Seção intitulada “Tecnologia é um campo, não um rótulo solto”

technology: PostgreSQL aparece na caixa em letra menor. Use para o que ajuda quem lê a se orientar — a linguagem, o banco, o serviço gerenciado — e não para a versão exata, que envelhece antes do desenho.

Próximo passo

Seção intitulada “Próximo passo”

Diagrama de componentes abre um container por dentro.