claude-plugins/dev-tools/skills/diagrama/SKILL.md

name, category, description, version, created, tools, layer

name	category	description	version	created	tools	layer
diagrama	dev-tools	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'.	1.0.0	2026-04-04	mcp__claude_ai_Excalidraw__export_to_excalidraw mcp__mcp-mermaid__generate Write Bash	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

<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):

<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:

<mxCell id="10" edge="1" source="2" target="3" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Cilindro (base de dados):

<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):

<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):

<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):

<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:

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