# TRAÇO — diagramas

No lugar de Miro, Whimsical e Lucidchart. Modelo `cena` com `layout: "livre"`:
nós posicionados e conectores que se ligam sozinhos pela borda mais curta.

## Regra que faz o diagrama ficar legível

- **Grade invisível de 60 px.** Use `x` e `y` múltiplos de 60. Alinhamento é o que
  separa diagrama de rabisco.
- **Fluxo lê da esquerda para a direita** (processo) ou **de cima para baixo**
  (hierarquia). Não misture os dois no mesmo diagrama.
- **Nó padrão:** `l: 340, a: 150`. Mantenha o mesmo tamanho para nós do mesmo nível.
- **Espaço entre colunas:** 200 px. Entre linhas: 90 px.
- **`destaque: true`** em no máximo dois nós — o começo e o resultado.

## Exemplo — fluxo de aprovação

```json
{
  "ferramenta": "traco",
  "titulo": "Fluxo de aprovação de compras",
  "doc": {
    "tema": "meia-noite",
    "largura": 1920, "altura": 1080,
    "cenas": [{
      "layout": "livre",
      "fundo": "pontos",
      "elementos": [
        { "id": "ped", "tipo": "no", "texto": "Pedido aberto",  "x": 120,  "y": 480, "l": 320, "a": 140, "destaque": true },
        { "id": "val", "tipo": "no", "texto": "Validação\nfiscal",  "x": 620,  "y": 480, "l": 320, "a": 140 },
        { "id": "ger", "tipo": "no", "texto": "Aprovação\ngerência", "x": 1120, "y": 300, "l": 320, "a": 140 },
        { "id": "dir", "tipo": "no", "texto": "Aprovação\ndiretoria", "x": 1120, "y": 660, "l": 320, "a": 140 },
        { "id": "ok",  "tipo": "no", "texto": "Compra\nemitida", "x": 1560, "y": 480, "l": 280, "a": 140, "destaque": true },

        { "tipo": "conector", "de": "ped", "para": "val" },
        { "tipo": "conector", "de": "val", "para": "ger", "texto": "até R$ 20 mil" },
        { "tipo": "conector", "de": "val", "para": "dir", "texto": "acima de R$ 20 mil" },
        { "tipo": "conector", "de": "ger", "para": "ok" },
        { "tipo": "conector", "de": "dir", "para": "ok" },

        { "tipo": "texto", "x": 120, "y": 120, "l": 900, "a": 120,
          "texto": "Compras · fluxo vigente", "papel": "chapeu" }
      ]
    }]
  }
}
```

## Nós e conectores

```jsonc
{ "id": "a", "tipo": "no", "texto": "Etapa",
  "x": 300, "y": 460, "l": 340, "a": 150,
  "destaque": false,        // pinta com a cor do tema
  "formato": "circulo",     // opcional
  "cor": "#1f8fe0" }        // opcional, sobrepõe o tema

{ "tipo": "conector", "de": "a", "para": "b",
  "estilo": "curva",        // curva | reta | cotovelo
  "texto": "rótulo da seta",
  "tracejado": false,
  "seta": true }
```

O conector calcula sozinho de qual lado sai e entra. Se `de` ou `para` apontar para
um `id` que não existe, ele simplesmente não é desenhado — sem quebrar o resto.

## Também serve para

- **Mapa mental:** nó central `destaque` e ramos em volta, `estilo: "curva"`.
- **Arquitetura:** uma `forma` grande atrás como área ("Nuvem", "On-premise") e os
  nós por cima; use `opacidade: 0.06` na área.
- **Organograma:** fluxo de cima para baixo, `estilo: "cotovelo"`.
- **Jornada:** uma linha só, `estilo: "reta"`, com `icone` acima de cada etapa.

## Vários diagramas

Cada item de `cenas` é uma prancha. Um arquivo pode ter o "como é hoje" e o
"como fica depois" — o modo Abrir alterna com `→`.