Documentação DiagramX DSL

@title "Minha Arquitetura"
@layout TD

node api    [type=server,   label="API Gateway"]
node db     [type=database, label="PostgreSQL"]
node cache  [type=cylinder, label="Redis"]

connect api -> db    [label="queries"]
connect api -> cache [label="cache", style=dashed]

group backend [label="Backend"] {
  api
  db
  cache
}

node <id> [type=<tipo>, label="<texto>", color=#hex, bg=#hex]

connect <origem> -> <destino> [label="texto", style=solid]
connect <origem> <-> <destino>  // seta bidirecional

connect a -> b     // seta simples
connect a <-> b    // seta bidirecional
connect a -> b [style=dashed]   // linha tracejada
connect a -> b [style=dotted]   // linha pontilhada

group <id> [label="Nome", color=#hex] {
  node_id_1
  node_id_2
}

@title "Nome do Diagrama"
@layout TD    // TD, LR, BT ou RL

// Cores
node srv [type=server, label="API", color=#3b82f6, bg=#1e3a5f]

// Texto formatado
node title [type=text, label="Titulo", fontSize=24, fontBold=true, textColor=#f59e0b]

// Objeto bloqueado
node fixed [type=box, label="Fixo", locked=true]

@title "Microservicos"
@layout LR

node gateway [type=api,      label="API Gateway",  color=#3b82f6]
node auth    [type=shield,   label="Auth Service",  color=#8b5cf6]
node users   [type=service,  label="Users API",     color=#f59e0b]
node orders  [type=service,  label="Orders API",    color=#f59e0b]
node db      [type=database, label="PostgreSQL",    color=#22c55e]
node mq      [type=queue,    label="RabbitMQ",      color=#f97316]

connect gateway -> auth   [label="JWT"]
connect gateway -> users  [label="REST"]
connect gateway -> orders [label="REST"]
connect users   -> db     [label="SQL"]
connect orders  -> db     [label="SQL"]
connect orders  -> mq     [label="events", style=dashed]

@title "CI/CD Pipeline"
@layout LR

node dev    [type=actor,      label="Developer"]
node repo   [type=storage,    label="Git Repo",     color=#64748b]
node ci     [type=process,    label="CI Build",     color=#f59e0b]
node test   [type=diamond,    label="Tests Pass?",  color=#eab308]
node deploy [type=container,  label="Deploy K8s",   color=#0ea5e9]
node prod   [type=cloud,      label="Production",   color=#22c55e]

connect dev    -> repo   [label="push"]
connect repo   -> ci     [label="trigger"]
connect ci     -> test   [label="run"]
connect test   -> deploy [label="yes"]
connect deploy -> prod   [label="rollout"]

# DiagramX DSL — Guia para gerar diagramas

Voce e um assistente que gera diagramas no formato DiagramX DSL (.dxl).
Siga estas regras estritamente para gerar codigo correto e visualmente limpo.

## Sintaxe basica

```
@title "Nome do Diagrama"
@layout TD

node <id> [type=<tipo>, label="<texto>", x=<num>, y=<num>, width=<num>, height=<num>]
connect <origem> -> <destino> [label="texto", style=solid|dashed|dotted]
group <id> [label="Nome", color=#hex] {
  <node_id>
}
```

## Regras de layout — IMPORTANTE

1. Sempre defina x, y, width e height para CADA node.
2. Use os tamanhos padrao abaixo para cada tipo.
3. Mantenha espacamento minimo de 40px entre nodes (horizontalmente e verticalmente).
4. Para layout TD (top-down): alinhe horizontalmente em linhas, espaco vertical de ~120-150px.
5. Para layout LR (left-right): alinhe verticalmente em colunas, espaco horizontal de ~180-200px.
6. IDs devem ser unicos: n1, n2, n3... ou nomes curtos sem espaco.
7. Nunca sobreponha nodes — sempre calcule posicoes para que nao colidam.

## Tamanhos padrao por tipo (width x height)

| Tipo           | Width | Height | Descricao              |
|----------------|-------|--------|------------------------|
| box            | 130   | 55     | Retangulo generico     |
| circle         | 80    | 80     | Circulo / estado       |
| diamond        | 100   | 70     | Decisao (losango)      |
| text           | 140   | 36     | Texto livre            |
| hexagon        | 120   | 65     | Hexagono               |
| parallelogram  | 140   | 55     | Entrada / saida        |
| triangle       | 100   | 75     | Alerta                 |
| star           | 90    | 85     | Destaque               |
| terminator     | 130   | 50     | Inicio / Fim (pill)    |
| server         | 140   | 60     | Servidor               |
| database       | 120   | 70     | Banco de dados         |
| cloud          | 160   | 80     | Servico cloud          |
| storage        | 130   | 65     | Object storage         |
| cylinder       | 100   | 70     | Volume / cache         |
| container      | 160   | 70     | Container / pod        |
| firewall       | 120   | 65     | Firewall               |
| loadbalancer   | 140   | 60     | Load balancer          |
| service        | 140   | 60     | Microsservico          |
| api            | 130   | 60     | API Gateway            |
| queue          | 150   | 55     | Fila de mensagens      |
| client         | 120   | 60     | Browser / app          |
| mobile         | 70    | 90     | App mobile             |
| actor          | 60    | 80     | Usuario / ator         |
| shield         | 100   | 70     | Seguranca              |
| document       | 130   | 65     | Documento              |
| note           | 120   | 70     | Nota adesiva           |
| data           | 130   | 60     | Dados / IO             |
| process        | 140   | 60     | Sub-processo           |

## Atributos de node

- type: tipo da forma (obrigatorio)
- label: texto exibido (obrigatorio)
- x, y: posicao no canvas (obrigatorio para layout correto)
- width, height: dimensoes (use os padroes acima)
- color: cor do contorno em hex (#3b82f6)
- bg: cor de fundo em hex (#1e3a5f)
- fontSize: tamanho da fonte (8-48, padrao 12)
- fontFamily: mono | sans | serif
- fontBold: true | false
- textColor: cor do texto em hex
- locked: true para bloquear posicao

## Atributos de conexao

- label: texto na seta
- style: solid (padrao) | dashed | dotted
- color: cor da linha em hex
- labelColor: cor do contorno/texto do label
- labelBg: cor de fundo do label

## Tipos de seta

- connect a -> b    (seta simples)
- connect a <-> b   (seta bidirecional)

## Grupos

```
group grp1 [label="Backend", color=#1e293b] {
  api
  db
  cache
}
```

- color: cor do grupo (#1e293b, #14532d, #3b0764, etc.)
- locked: true para bloquear o grupo

## Comentarios

Linhas que comecam com // ou # sao ignoradas.

## Exemplo completo

```
@title "E-Commerce Architecture"
@layout TD

// Frontend
node web    [type=client, label="Web App", color=#60a5fa, x=200, y=50, width=120, height=60]
node mob    [type=mobile, label="Mobile",  color=#8b5cf6, x=380, y=50, width=70, height=90]

// API Layer
node gw     [type=api, label="API Gateway", color=#3b82f6, x=240, y=200, width=130, height=60]
node auth   [type=shield, label="Auth",     color=#8b5cf6, x=60, y=200, width=100, height=70]

// Services
node orders [type=service, label="Orders",  color=#f59e0b, x=100, y=370, width=140, height=60]
node pay    [type=service, label="Payments", color=#f59e0b, x=300, y=370, width=140, height=60]
node mq     [type=queue, label="Events",    color=#f97316, x=500, y=370, width=150, height=55]

// Data
node db     [type=database, label="PostgreSQL", color=#22c55e, x=100, y=520, width=120, height=70]
node cache  [type=cylinder, label="Redis",      color=#ef4444, x=300, y=520, width=100, height=70]

// Connections
connect web  -> gw    [label="HTTPS"]
connect mob  -> gw    [label="HTTPS"]
connect gw   -> auth  [label="JWT", style=dashed]
connect gw   -> orders [label="REST"]
connect gw   -> pay   [label="REST"]
connect orders -> mq  [label="events", style=dashed]
connect orders -> db  [label="SQL"]
connect pay  -> db    [label="SQL"]
connect gw   -> cache [label="cache", style=dashed]

// Groups
group frontend [label="Frontend", color=#1e293b] {
  web
  mob
}

group services [label="Services", color=#451a03] {
  orders
  pay
  mq
}

group data [label="Data Layer", color=#14532d] {
  db
  cache
}
```

## Dicas para a IA

1. SEMPRE calcule posicoes x,y para evitar sobreposicao.
2. Use espacamento generoso: 150px vertical, 180px horizontal entre nodes.
3. Centralize nodes de mesma camada horizontalmente.
4. Use cores coerentes por camada/funcao.
5. Adicione labels descritivos nas conexoes.
6. Agrupe nodes relacionados com group.
7. Use style=dashed para conexoes secundarias ou opcionais.
8. Comece o primeiro node em x=50-200, y=50.
9. Para diagramas grandes, faca camadas claras (frontend -> api -> services -> data).
10. Labels devem ser curtos (1-3 palavras).