Diagram Design

Esta skill ayuda a arquitectos de diseño, ingenieros y redactores técnicos a crear en segundos diagramas profesionales alineados con la identidad de su marca. Admite 39 tipos de diagramas, desde modelos de datos y arquitecturas de despliegue hasta mapas de Wardley y recorridos de usuario. Cada diagrama es un archivo HTML autónomo y optimizado, con SVG y CSS integrados y sin dependencias externas.

Aspectos destacados

• Automatiza la extracción de elementos de marca desde tu sitio web o sistema de diseño local
• Admite 39 tipos de diagramas: flujo, secuencia, máquina de estados, modelo ER, Gantt, Sankey, clases UML y muchos más
• Redibuja archivos existentes de draw.io y Mermaid con tamaños y niveles de detalle personalizados
• Aplica criterios de calidad editorial: densidad mínima de nodos, etiquetas claras y accesibilidad completa
• Genera diagramas HTML de un solo archivo optimizados para web, impresión y documentación
• Incluye compatibilidad con temas claros y oscuros, además de estilos opcionales de boceto o terminal

El sistema prioriza la claridad mediante una simplificación rigurosa: cada elemento debe justificar su presencia. Impone una cuadrícula obligatoria de 4 píxeles y aplica seis reglas para conectores que evitan ambigüedades visuales. Cuando la complejidad supera los límites establecidos, divide automáticamente los diagramas en vistas generales y detalladas. Es adecuado para arquitectos de sistemas, equipos de producto y flujos de documentación técnica que necesitan comunicación visual rápida y coherente con la marca sin herramientas externas.