Habilidade de Diagrama Draw.io

Crie arquivos de diagrama profissionais e editáveis no formato XML nativo do draw.io.

Formato de Saída

Os arquivos draw.io são XML com esta estrutura:

<mxfile host="app.diagrams.net" modified="DATE" agent="Claude" version="21.0.0" type="device">
  <diagram name="DIAGRAM_NAME" id="UNIQUE_ID">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Todos os elementos do diagrama vão aqui -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Tipos de Elementos Principais

Formas Básicas

<!-- Retângulo -->
<mxCell id="id-unico" value="Texto do Rótulo" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- Retângulo Arredondado -->
<mxCell id="id-unico" value="Rótulo" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- Cilindro (Banco de Dados) -->
<mxCell id="id-unico" value="Banco de Dados" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

<!-- Elipse -->
<mxCell id="id-unico" value="Nó" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

Contêineres e Grupos

<!-- Swimlane (Contêiner com Cabeçalho) -->
<mxCell id="id-unico" value="Título da Seção" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=30;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="200" height="150" as="geometry" />
</mxCell>

<!-- Barra de Cabeçalho (usando cor primária da marca) -->
<mxCell id="id-unico" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#0066CC;strokeColor=#0066CC;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="40" as="geometry" />
</mxCell>

Conectores e Setas

<!-- Seta Básica -->
<mxCell id="id-unico" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=2;strokeColor=#666666;" edge="1" parent="1" source="id-fonte" target="id-alvo">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- Seta Bidirecional -->
<mxCell id="id-unico" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;strokeWidth=2;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- Seta Flex (Seta de Bloco) -->
<mxCell id="id-unico" value="" style="shape=flexArrow;endArrow=classic;html=1;fillColor=#FFB800;strokeColor=#cc9400;width=20;endSize=8;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- Linha Tracejada -->
<mxCell id="id-unico" value="" style="endArrow=classic;html=1;dashed=1;dashPattern=8 8;strokeColor=#999999;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

Elementos de Texto

<!-- Texto Simples -->
<mxCell id="id-unico" value="Texto do Rótulo" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="100" height="30" as="geometry" />
</mxCell>

<!-- Título em Negrito -->
<mxCell id="id-unico" value="Título" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="100" y="20" width="300" height="40" as="geometry" />
</mxCell>

<!-- Texto Multilinha (use &#xa; para quebras de linha) -->
<mxCell id="id-unico" value="Linha 1&#xa;Linha 2&#xa;Linha 3" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;fontSize=10;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="150" height="60" as="geometry" />
</mxCell>

Propriedades de Estilo Comuns

Cores (use códigos hexadecimais)

Propriedade	Finalidade	Exemplo
`fillColor`	Fundo	`fillColor=#dae8fc`
`strokeColor`	Borda	`strokeColor=#6c8ebf`
`fontColor`	Texto	`fontColor=#333333`

Paleta de Cores Padrão

Azul:    fillColor=#dae8fc;strokeColor=#6c8ebf
Verde:   fillColor=#d5e8d4;strokeColor=#82b366
Amarelo: fillColor=#fff2cc;strokeColor=#d6b656
Laranja: fillColor=#ffe6cc;strokeColor=#d79b00
Vermelho: fillColor=#f8cecc;strokeColor=#b85450
Roxo:    fillColor=#e1d5e7;strokeColor=#9673a6
Cinza:   fillColor=#f5f5f5;strokeColor=#666666

Tipografia

Propriedade	Valores	Exemplo
`fontSize`	Número	`fontSize=12`
`fontStyle`	0=normal, 1=negrito, 2=itálico, 3=negrito+itálico	`fontStyle=1`
`align`	left, center, right	`align=center`
`verticalAlign`	top, middle, bottom	`verticalAlign=middle`

Bordas e Efeitos

Propriedade	Valores	Exemplo
`rounded`	0 ou 1	`rounded=1`
`strokeWidth`	Número	`strokeWidth=2`
`dashed`	0 ou 1	`dashed=1`
`dashPattern`	Padrão	`dashPattern=8 8`
`shadow`	0 ou 1	`shadow=1`

Marca da Empresa (Customizável)

Esta habilidade suporta personalização específica da empresa. Edite references/branding.md para definir as cores e estilos da sua organização.

Marcadores de marca padrão (substitua pelos seus):

Primária:   fillColor=#0066CC;strokeColor=#0052a3;fontColor=#FFFFFF
Secundária: fillColor=#FFB800;strokeColor=#cc9400;fontColor=#333333
Escura:     fillColor=#1a1a2e;strokeColor=#1a1a2e;fontColor=#FFFFFF
Fundo Claro: fillColor=#f0f4f8;strokeColor=#0066CC

Consulte references/branding.md para instruções completas de personalização.

Padrões de Diagrama

Layout de Diagrama de Arquitetura

Barra de título no topo (largura total, cor da marca)
Seções principais como swimlanes ou contêineres arredondados
Componentes como retângulos arredondados dentro das seções
Bancos de dados como cilindros
Sistemas externos nas bordas esquerda/direita
Setas mostrando fluxo de dados/controle
Legenda no canto explicando cores/símbolos
Rodapé com metadados

Arquitetura em Camadas (De Cima para Baixo)

┌─────────────────────────────────────┐
│           Usuários / Clientes       │  ← Camada superior
├─────────────────────────────────────┤
│           API / Interface           │
├─────────────────────────────────────┤
│         Lógica de Negócio           │
├─────────────────────────────────────┤
│         Dados / Armazenamento       │  ← Camada inferior
└─────────────────────────────────────┘

Fluxo da Esquerda para a Direita

┌──────┐     ┌──────────┐     ┌──────────┐
│Fonte │ ──► │ Processo │ ──► │  Alvo    │
└──────┘     └──────────┘     └──────────┘

Melhores Práticas

IDs Únicos: Cada mxCell precisa de um atributo id único
Hierarquia pai: Defina parent="1" para elementos de nível superior
Posicionamento: Use mxGeometry com x, y, largura, altura
Camadas: Elementos definidos depois aparecem na frente
Alinhamento: Use espaçamento x/y consistente (grade de 10-20px)
Cores: Use pares coordenados de preenchimento/borda da paleta
Rótulos: Mantenha o texto conciso; use elementos de texto separados para descrições
Espaço em branco: Deixe margens dentro dos contêineres (padding de 20-40px)

Fluxo de Trabalho

Determine o tipo de diagrama e o padrão de layout
Defina as dimensões da página em mxGraphModel (pageWidth, pageHeight)
Crie a estrutura de contêineres (swimlanes, grupos)
Adicione componentes com IDs únicos
Adicione conectores referenciando os IDs de origem/destino
Adicione rótulos e anotações
Adicione legenda se estiver usando código de cores
Salve como arquivo .drawio
Copie para /mnt/user-data/outputs/ e apresente ao usuário

Ícones de Provedores de Nuvem (AWS, Azure, GCP)

O Draw.io inclui bibliotecas de formas integradas para os principais provedores de nuvem. Use ícones oficiais para diagramas de arquitetura profissionais.

Ícones AWS (Referência Rápida)

AWS usa shape=mxgraph.aws4.resourceIcon com resIcon=mxgraph.aws4.SERVICE:

<mxCell id="lambda-1" value="Lambda" style="sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="78" height="78" as="geometry" />
</mxCell>

Valores comuns de resIcon AWS:

Computação: ec2, lambda, ecs, eks, fargate
Armazenamento: s3, elastic_block_store, elastic_file_system
Banco de Dados: rds, dynamodb, aurora, elasticache, redshift
Rede: vpc, cloudfront, route_53, api_gateway, elastic_load_balancing
Segurança: iam, cognito, secrets_manager, kms, waf

Cores das Categorias AWS:

Computação: #ED7100
Armazenamento: #7AA116
Banco de Dados: #C925D1
Rede: #8C4FFF
Segurança: #DD344C

Ícones Azure (Referência Rápida)

Azure usa image=img/lib/azure2/CATEGORY/SERVICE.svg:

<mxCell id="vm-1" value="VM" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="68" height="68" as="geometry" />
</mxCell>

Caminhos de imagem Azure comuns:

compute/Virtual_Machine.svg, compute/Function_Apps.svg
containers/Kubernetes_Services.svg
storage/Storage_Accounts.svg, storage/Blob_Storage.svg
databases/SQL_Database.svg, databases/Azure_Cosmos_DB.svg
networking/Virtual_Networks.svg, networking/Load_Balancers.svg
security/Key_Vaults.svg, identity/Azure_Active_Directory.svg

Contêineres de Grupo AWS

<!-- VPC -->
<mxCell id="vpc" value="VPC" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;dashed=0;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="300" as="geometry" />
</mxCell>

<!-- Sub-rede Pública -->
grIcon=mxgraph.aws4.group_public_subnet;strokeColor=#7AA116;fillColor=#E9F3E6

<!-- Sub-rede Privada -->
grIcon=mxgraph.aws4.group_private_subnet;strokeColor=#00A4A6;fillColor=#E6F6F7

Referências

Para padrões avançados e listas completas de ícones, consulte:

references/architecture-patterns.md - Layouts comuns de diagramas de arquitetura
references/style-guide.md - Opções de estilo estendidas e posicionamento de ícones
references/cloud-icons.md - Referência completa de ícones AWS, Azure, GCP
references/branding.md - Guia de personalização da marca da empresa

Draw.io - Criação de Diagramas

O que é Draw.io - Criação de Diagramas?

Perguntar na sua IA favorita

Documentação