Trechos do capítulo "Diagramas, quadros brancos e grafos"
alexandrecaramaschi.com/educacao/frontends-com-vibecoding

Três trechos: o mesmo diagrama escrito nas duas linguagens de texto e dois
pedidos prontos para colar no agente. A página explica qual família de
ferramenta cada caso pede; aqui está o material bruto.

================================================================================

### O que faz: escreve o mesmo diagrama de arquitetura nas duas linguagens, para você comparar o resultado
### Onde entra: arquivo de texto versionado no repositório, compilado para imagem no build
### Cuidado: a primeira linguagem espalha as caixas; a segunda desenha a caixa em volta do grupo. Acima de uma dúzia de elementos, a diferença decide

# O mesmo diagrama nas duas sintaxes

# --- Mermaid (bom para fluxo simples) ---
flowchart TD
  UI[Frontend Next.js] --> API[API Routes]
  API --> DB[(Postgres)]
  API --> Cache[(Redis)]

# --- D2 (contêineres por camada, melhor para arquitetura) ---
cliente: {
  ui: Frontend Next.js
}
servidor: {
  api: API Routes
  cache: Redis
}
dados: {
  db: Postgres
}
cliente.ui -> servidor.api
servidor.api -> dados.db
servidor.api -> servidor.cache

================================================================================

### O que faz: pede o diagrama de arquitetura do repositório, compilado para imagem no momento da publicação
### Onde entra: documentação de arquitetura que precisa acompanhar o sistema sem alguém redesenhar
### Cuidado: se a compilação ficar no navegador de quem lê, você carrega centenas de quilobytes para mostrar uma imagem que já poderia estar pronta

Descreva a arquitetura deste repositório e gere o diagrama em D2 com
contêineres por camada (cliente, servidor, dados, integrações externas).

Requisitos:
- Compile o D2 para SVG no passo de build (não no navegador do leitor).
- Injete os tokens de cor do projeto (var(--accent), var(--text),
  var(--border)) no SVG gerado; nada de cores hardcoded.
- Todo <text> com fill EXPLÍCITO e font-size >= 14px.
- Use layout ELK; agrupe por camada com contêineres aninhados.

Critérios de aceite:
1. O SVG final não referencia nenhuma lib em runtime.
2. Rodei o auditor de contraste (Chrome MCP) e todo texto passa AA.
3. Se o sistema tiver mais de 12 nós, você justificou D2 sobre Mermaid.
4. As setas têm rótulo quando o tipo de chamada não é óbvio.

================================================================================

### O que faz: monta um editor de fluxo dentro do produto, com três tipos de caixa e o resultado salvo
### Onde entra: construtor de automação, editor de atendimento, montador de árvore de decisão
### Cuidado: sem altura declarada no contêiner, a tela nasce com zero pixel e você acha que a biblioteca quebrou

Monte um editor React Flow com TRÊS tipos de nó customizado:
gatilho, condição e ação. Cada tipo é um componente React próprio
estilizado com os tokens do projeto (var(--accent) para gatilho,
var(--success) para ação, var(--border) nas bordas; texto var(--text)).

Requisitos:
- Minimap, snap ao soltar e navegação por teclado ativos.
- Persista o grafo (nós + arestas) em JSON no localStorage e recarregue
  no mount.
- Handles de conexão visíveis e com alvo de toque >= 24px (WCAG 2.2).

Critérios de aceite:
1. Recarreguei a página e o fluxo voltou idêntico (persistência ok).
2. Consigo criar, conectar e apagar nós só pelo teclado.
3. Os três tipos de nó são visualmente distintos e usam os tokens.
4. Contraste do rótulo de cada nó passa AA (auditor no Chrome MCP).