---
name: diagrama
category: dev-tools
description: "Gera diagramas de arquitectura, fluxo, ER e sequência em três formatos: draw.io (.drawio), Excalidraw e Mermaid. Usar quando 'diagrama', 'arquitectura', 'draw.io', 'fluxo', 'ER', 'sequência', 'infra', 'componentes'."
version: "1.0.0"
created: 2026-04-04
tools: [mcp__claude_ai_Excalidraw__export_to_excalidraw, mcp__mcp-mermaid__generate, Write, Bash]
layer: wiki
---

# Skill: /diagrama

Gera diagramas técnicos em três formatos consoante o caso de uso. Suporta arquitectura de sistemas, fluxogramas, diagramas ER, sequência, infra-estrutura e redes.

---

## Quando usar cada formato

| Formato | Quando usar | Output |
|---------|------------|--------|
| **draw.io** | Diagramas formais para documentação, propostas, clientes | `.drawio` (editável) |
| **Excalidraw** | Esboços rápidos, brainstorming visual, estilo whiteboard | `.excalidraw` / MCP |
| **Mermaid** | Diagramas como código, versionáveis em Git, embeds Markdown | `.svg` / `.png` |

---

## Processo de execução

### 1. Identificar pedido

Quando o utilizador pede um diagrama, detectar:
- **Tipo:** arquitectura | fluxo | ER | sequência | rede | organograma | classe
- **Formato pretendido:** draw.io (default para doc. formal) | excalidraw | mermaid
- **Contexto:** sistemas envolvidos, entidades, actores

Se não especificado, perguntar apenas: "draw.io (formal) ou Excalidraw (esboço)?"

### 2. Gerar conteúdo

---

## Geração draw.io (.drawio)

O formato draw.io é mxGraph XML. Gerar o XML e guardar como `.drawio`.

### Estrutura base

```xml
<mxfile host="Claude Code" modified="YYYY-MM-DDTHH:MM:SS" agent="Claude" version="21.0">
  <diagram name="Diagrama" id="diagram-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"/>
        <!-- elementos aqui -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```

### Templates de elementos mxGraph

**Rectângulo (componente/serviço):**
```xml
<mxCell id="2" value="Nome" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="160" y="160" width="120" height="60" as="geometry"/>
</mxCell>
```

**Seta/ligação:**
```xml
<mxCell id="10" edge="1" source="2" target="3" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>
```

**Cilindro (base de dados):**
```xml
<mxCell id="5" value="PostgreSQL" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
  <mxGeometry x="320" y="160" width="80" height="80" as="geometry"/>
</mxCell>
```

**Cloud (serviço externo):**
```xml
<mxCell id="6" value="Cloudflare" style="shape=mxgraph.cisco.sites.generic_building;sketch=0;html=1;pointerEvents=1;dashed=0;fillColor=#036897;strokeColor=#ffffff;strokeWidth=2;verticalLabelPosition=bottom;verticalAlign=top;align=center;outlineConnect=0;" vertex="1" parent="1">
  <mxGeometry x="480" y="160" width="60" height="60" as="geometry"/>
</mxCell>
```

**Actor (pessoa/utilizador):**
```xml
<mxCell id="7" value="Utilizador" style="shape=mxgraph.flowchart.start_2;fillColor=#00BEF2;strokeColor=#006EAF;fontColor=#ffffff;fontStyle=1;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="40" y="170" width="60" height="40" as="geometry"/>
</mxCell>
```

**Swimlane (grupo/camada):**
```xml
<mxCell id="8" value="Camada Frontend" style="swimlane;startSize=20;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="400" height="200" as="geometry"/>
</mxCell>
```

### Paleta de cores Descomplicar

| Componente | fillColor | strokeColor |
|-----------|-----------|-------------|
| Serviço/App | `#dae8fc` | `#6c8ebf` |
| Base de dados | `#f8cecc` | `#b85450` |
| Fila/Queue | `#d5e8d4` | `#82b366` |
| Externo/Cloud | `#fff2cc` | `#d6b656` |
| Infra/Servidor | `#e1d5e7` | `#9673a6` |
| Claude/IA | `#f0f4ff` | `#4a6cf7` |

### Guardar ficheiro

Guardar em `/media/ealmeida/Dados/Hub/tmp/diagramas/` com nome descritivo:
```
YYYY-MM-DD-nome-diagrama.drawio
```

Abrir com:
```bash
drawio "/media/ealmeida/Dados/Hub/tmp/diagramas/NOME.drawio" &
```
(ou abrir manualmente com draw.io desktop / draw.io no browser)

---

## Geração Excalidraw

Usar o MCP `mcp__claude_ai_Excalidraw__export_to_excalidraw` para diagramas no estilo whiteboard.

### Fluxo

1. Chamar `mcp__claude_ai_Excalidraw__create_view` para iniciar sessão
2. Chamar `mcp__claude_ai_Excalidraw__export_to_excalidraw` com o conteúdo estruturado
3. Informar o utilizador do link/path gerado

### Casos de uso preferidos

- Brainstorming e exploração rápida
- Diagramas de fluxo com estilo manual
- Esboços para reuniões
- Arquitecturas de alto nível para comunicação interna

---

## Geração Mermaid

Usar o MCP `mcp__mcp-mermaid__generate`