Habilidad de Diagramas Draw.io

Crea archivos de diagramas profesionales y editables en el formato XML nativo de draw.io.

Formato de Salida

Los archivos Draw.io son XML con esta estructura:

<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 los elementos del diagrama van aquí -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Tipos de Elementos Principales

Formas Básicas

<!-- Rectángulo -->
<mxCell id="unique-id" value="Texto de Etiqueta" 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>

<!-- Rectángulo Redondeado -->
<mxCell id="unique-id" value="Etiqueta" 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 (Base de datos) -->
<mxCell id="unique-id" value="Base de datos" 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="unique-id" value="Nodo" 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>

Contenedores y Grupos

<!-- Carril (Contenedor con Encabezado) -->
<mxCell id="unique-id" value="Título de Sección" 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 Encabezado (usando color primario de marca) -->
<mxCell id="unique-id" 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 y Flechas

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

<!-- Flecha Bidireccional -->
<mxCell id="unique-id" 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>

<!-- Flecha Flexible (Flecha de bloque) -->
<mxCell id="unique-id" 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>

<!-- Línea Discontinua -->
<mxCell id="unique-id" 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 Simple -->
<mxCell id="unique-id" value="Texto de Etiqueta" 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 en Negrita -->
<mxCell id="unique-id" 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 Multilínea (usar &#xa; para saltos de línea) -->
<mxCell id="unique-id" value="Línea 1&#xa;Línea 2&#xa;Línea 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>

Propiedades de Estilo Comunes

Colores (usar códigos hex)

Propiedad	Propósito	Ejemplo
`fillColor`	Fondo	`fillColor=#dae8fc`
`strokeColor`	Borde	`strokeColor=#6c8ebf`
`fontColor`	Texto	`fontColor=#333333`

Paleta de Colores Estándar

Azul:    fillColor=#dae8fc;strokeColor=#6c8ebf
Verde:   fillColor=#d5e8d4;strokeColor=#82b366
Amarillo: fillColor=#fff2cc;strokeColor=#d6b656
Naranja: fillColor=#ffe6cc;strokeColor=#d79b00
Rojo:    fillColor=#f8cecc;strokeColor=#b85450
Púrpura: fillColor=#e1d5e7;strokeColor=#9673a6
Gris:    fillColor=#f5f5f5;strokeColor=#666666

Tipografía

Propiedad	Valores	Ejemplo
`fontSize`	Número	`fontSize=12`
`fontStyle`	0=normal, 1=negrita, 2=cursiva, 3=negrita+cursiva	`fontStyle=1`
`align`	left, center, right	`align=center`
`verticalAlign`	top, middle, bottom	`verticalAlign=middle`

Bordes y Efectos

Propiedad	Valores	Ejemplo
`rounded`	0 o 1	`rounded=1`
`strokeWidth`	Número	`strokeWidth=2`
`dashed`	0 o 1	`dashed=1`
`dashPattern`	Patrón	`dashPattern=8 8`
`shadow`	0 o 1	`shadow=1`

Marca de la Empresa (Personalizable)

Esta habilidad soporta personalización de marca específica de la empresa. Edita references/branding.md para configurar los colores y estilos de tu organización.

Marcadores de marca predeterminados (reemplázalos con los tuyos):

Primario:   fillColor=#0066CC;strokeColor=#0052a3;fontColor=#FFFFFF
Secundario: fillColor=#FFB800;strokeColor=#cc9400;fontColor=#333333
Oscuro:    fillColor=#1a1a2e;strokeColor=#1a1a2e;fontColor=#FFFFFF
Fondo Claro: fillColor=#f0f4f8;strokeColor=#0066CC

Consulte references/branding.md para instrucciones completas de personalización.

Patrones de Diagrama

Diseño de Diagrama de Arquitectura

Barra de título en la parte superior (ancho completo, color de marca)
Secciones principales como carriles o contenedores redondeados
Componentes como rectángulos redondeados dentro de las secciones
Bases de datos como cilindros
Sistemas externos en los bordes izquierdo/derecho
Flechas que muestran flujo de datos/control
Leyenda en una esquina explicando colores/símbolos
Pie de página con metadatos

Arquitectura en Capas (Arriba a Abajo)

┌─────────────────────────────────────┐
│           Usuarios / Clientes            │  ← Capa superior
├─────────────────────────────────────┤
│           API / Interfaz               │
├─────────────────────────────────────┤
│         Lógica de Negocio              │
├─────────────────────────────────────┤
│         Datos / Almacenamiento          │  ← Capa inferior
└─────────────────────────────────────┘

Flujo de Izquierda a Derecha

┌──────┐     ┌──────────┐     ┌──────────┐
│Fuente│ ──► │ Proceso  │ ──► │  Destino │
└──────┘     └──────────┘     └──────────┘

Mejores Prácticas

IDs Únicos: Cada mxCell necesita un atributo id único
Jerarquía de padres: Establece parent="1" para elementos de nivel superior
Posicionamiento: Usa mxGeometry con x, y, ancho, alto
Capas: Los elementos definidos después aparecen encima
Alineación: Usa espaciado x/y consistente (cuadrícula de 10-20px)
Colores: Usa pares coordinados de relleno/borde de la paleta
Etiquetas: Mantén el texto conciso; usa elementos de texto separados para descripciones
Espacio en blanco: Deja márgenes dentro de los contenedores (relleno de 20-40px)

Flujo de Trabajo

Determina el tipo de diagrama y el patrón de diseño
Establece las dimensiones de la página en mxGraphModel (pageWidth, pageHeight)
Crea la estructura del contenedor (carriles, grupos)
Agrega componentes con IDs únicos
Agrega conectores referenciando IDs de origen/destino
Agrega etiquetas y anotaciones
Agrega leyenda si se usa codificación por colores
Guarda como archivo .drawio
Copia a /mnt/user-data/outputs/ y preséntalo al usuario

Iconos de Proveedores de Nube (AWS, Azure, GCP)

Draw.io incluye bibliotecas de formas integradas para los principales proveedores de nube. Usa iconos oficiales para diagramas de arquitectura profesionales.

Iconos AWS (Referencia Rápida)

AWS usa shape=mxgraph.aws4.resourceIcon con resIcon=mxgraph.aws4.SERVICIO:

<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 comunes de resIcon para AWS:

Cómputo: ec2, lambda, ecs, eks, fargate
Almacenamiento: s3, elastic_block_store, elastic_file_system
Base de datos: rds, dynamodb, aurora, elasticache, redshift
Redes: vpc, cloudfront, route_53, api_gateway, elastic_load_balancing
Seguridad: iam, cognito, secrets_manager, kms, waf

Colores de Categoría AWS:

Cómputo: #ED7100
Almacenamiento: #7AA116
Base de datos: #C925D1
Redes: #8C4FFF
Seguridad: #DD344C

Iconos Azure (Referencia Rápida)

Azure usa image=img/lib/azure2/CATEGORÍA/SERVICIO.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>

Rutas de imagen comunes para Azure:

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

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

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

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

Referencias

Para patrones avanzados y listas completas de iconos, consulta:

references/architecture-patterns.md - Diseños comunes de diagramas de arquitectura
references/style-guide.md - Opciones de estilo extendidas y colocación de iconos
references/cloud-icons.md - Referencia completa de iconos AWS, Azure, GCP
references/branding.md - Guía de personalización de marca de la empresa

davidodediran/Draw.io-claude-skills

¿Qué es Draw.io-claude-skills?

Preguntar en tu IA favorita

Documentación