Habilidade de Diagrama Draw.io

Gere diagramas draw.io como arquivos nativos .drawio e exporte-os para imagens PNG que podem ser incorporadas em documentos do Word.

Como Criar um Diagrama

1. Gere XML do draw.io no formato mxGraphModel para o diagrama solicitado
2. Escreva o XML em um arquivo .drawio usando a ferramenta de criar/editar arquivo
3. Exporte para PNG usando o script de exportação incluído

Script de Exportação Incluído

Esta habilidade inclui drawio-to-png.mjs, um script de exportação Node.js com dois backends de renderização:

1. draw.io CLI (perfeito em pixels, mais rápido) — usado automaticamente se o draw.io desktop estiver instalado
2. Visualizador oficial do draw.io em navegador headless (perfeito em pixels, precisa de Chromium/Edge) — fallback quando o CLI não estiver disponível

Uso

# Install dependencies (one-time, from the scripts folder)
cd skills/drawio/scripts && npm install

# Export a single diagram
node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]

# Export all .drawio files in a directory
node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>

# Force a specific renderer
node skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto <input.drawio>

Conteúdo da Pasta da Habilidade

Formatos de Exportação Suportados

Convenções de Estilo XML do Draw.io

Use estes estilos para diagramas consistentes e profissionais:

<!-- Primary service (highlighted) -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=2;arcSize=12;shadow=1;" />

<!-- External system -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" />

<!-- Success/processing stage -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" />

<!-- Warning/quality gate -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />

<!-- Error/failure path -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" />

<!-- Data store (cylinder) -->
<mxCell style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />

<!-- Arrow -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=1;strokeColor=#6c8ebf;strokeWidth=2;" />

Localizando o draw.io CLI

Tente drawio primeiro (funciona se estiver no PATH), depois use o fallback:

• Windows: "C:\Program Files\draw.io\draw.io.exe"
• macOS: /Applications/draw.io.app/Contents/MacOS/draw.io
• Linux: drawio (via snap/apt/flatpak)

Comando de Exportação do CLI

drawio -x -f png -e -b 10 -o <output.png> <input.drawio>

Flags: -x (exportar), -f (formato), -e (incorporar XML do diagrama), -b (borda), -o (caminho de saída).