Gerador de Diagramas Draw.io

Esta habilidade permite gerar, editar e validar arquivos de diagramas draw.io (.drawio) com a estrutura XML mxGraph correta. Todos os arquivos gerados abrem imediatamente na extensão draw.io do VS Code (hediet.vscode-drawio) sem a necessidade de correções manuais. Você também pode abrir os arquivos no aplicativo web draw.io ou no aplicativo desktop, se preferir.

1. Quando Usar Esta Habilidade

Frases de gatilho (carregue esta habilidade quando vir estas)

• "criar um diagrama", "desenhar um fluxograma", "gerar um diagrama de arquitetura"
• "projetar um diagrama de sequência", "fazer um diagrama de classes UML", "construir um diagrama ER"
• "adicionar um arquivo .drawio", "atualizar o diagrama", "visualizar o fluxo"
• "documentar a arquitetura", "mostrar o modelo de dados", "diagramar as interações do serviço"
• Qualquer solicitação para produzir ou modificar um arquivo .drawio, .drawio.svg ou .drawio.png

Tipos de diagramas suportados

2. Pré-requisitos

• Se estiver executando com a integração do VS Code ativada, instale a extensão drawio: Extensão draw.io VS Code — hediet.vscode-drawio (ID da extensão). Instale com:

  ext install hediet.vscode-drawio
  

• Extensões de arquivo suportadas: .drawio, .drawio.svg, .drawio.png
• Python 3.8+ (opcional) — para os scripts de validação e inserção de formas em scripts/

3. Fluxo de Trabalho do Agente Passo a Passo

Siga estas etapas em ordem para cada tarefa de geração de diagrama.

Etapa 1 — Entender a Solicitação

Pergunte ou infira:

1. Tipo de diagrama — Que tipo de diagrama? (fluxograma, arquitetura, UML, ER, sequência, rede...)
2. Entidades / Atores — Quais são os principais componentes, atores, classes ou tabelas?
3. Relacionamentos — Como eles estão conectados? Qual a direção? Qual a cardinalidade?
4. Caminho de saída — Onde o arquivo .drawio deve ser salvo?
5. Arquivo existente — Estamos criando um novo ou editando um arquivo existente?

Se a solicitação for ambígua, infira o tipo de diagrama mais sensato a partir do contexto (por exemplo, "mostrar as tabelas" → diagrama ER, "mostrar como o fluxo da chamada da API" → diagrama de sequência).

Etapa 2 — Selecionar um Modelo ou Começar do Zero

• Use um modelo quando o tipo de diagrama corresponder a um em assets/templates/. Copie a estrutura do modelo e substitua os valores de espaço reservado.
• Comece do zero para layouts novos. Comece com o esqueleto válido mínimo:

<!-- Set modified="" to the current ISO 8601 timestamp when generating a new file -->
<mxfile host="Electron" modified="" version="26.0.0">
  <diagram id="page-1" name="Page-1">
    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="1169" pageHeight="827"
                  math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Your cells go here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Regra: os IDs 0 e 1 são SEMPRE necessários e devem ser as duas primeiras células. Nunca os reutilize.

Etapa 3 — Planejar o Layout

Antes de gerar o XML, esboce a colocação lógica:

• Organize em linhas ou camadas (use raias para camadas)
• Espaçamento horizontal: 40–60px entre formas da mesma linha
• Espaçamento vertical: 80–120px entre linhas de camadas
• Tamanho padrão da forma: 120x60 px para caixas de processo, 160x80 px para raias
• Tela padrão: A4 paisagem = 1169 x 827 px

Etapa 4 — Gerar o XML mxGraph

Célula de vértice (cada forma):

<mxCell id="unique-id" value="Label"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="1">

…