Diagram Design

Diagram Design: análisis en profundidad del Agent Skill que consigue que los diagramas generados por IA parezcan diseñados, no generados

Introducción: qué es y qué problema resuelve

Diagram Design es un Agent Skill open source creado para asistentes de programación con IA como Claude Code, Codex y Cursor. Su objetivo es muy concreto: evitar que los diagramas generados por IA tengan ese aspecto genérico que permite reconocerlos inmediatamente como contenido generado automáticamente.

Quienes hayan utilizado IA para crear diagramas de flujo o arquitecturas probablemente conozcan el resultado: rectángulos redondeados demasiado genéricos, degradados azul-violeta, todos los nodos con el mismo peso visual y una densidad de información que puede ser demasiado baja o directamente caótica.

La autora de Diagram Design, Cathryn Lavery, explica en el README del proyecto que cada vez que necesitaba un boceto de arquitectura o un diagrama de flujo, los resultados generados por Claude parecían desentonar con el resto de su sitio web. La alternativa era dedicar unos 30 minutos a luchar con Figma o simplemente renunciar a incluir el gráfico.

Diagram Design no es una aplicación independiente ni un servicio SaaS. Es un conjunto de reglas de diseño integrado en el flujo de trabajo de un agente de IA. No mejora directamente la capacidad de la IA para generar diagramas, sino que le impone un sistema de diseño estricto para conseguir resultados visualmente más consistentes y con una calidad cercana a la de una pieza editada profesionalmente.

Está dirigido principalmente a redactores técnicos, desarrolladores, product managers, arquitectos de software y cualquier persona que necesite crear diagramas profesionales con ayuda de IA.

Para diseñadores que ya dominan Figma o Lucidchart y necesitan un control extremadamente preciso, probablemente no sea la primera opción. Para quienes quieren describir un diagrama mediante lenguaje natural y obtener rápidamente algo que puedan utilizar directamente, en cambio, resuelve un problema muy concreto.

Posicionamiento y funcionamiento

Diagram Design combina las características de un generador de diagramas mediante IA y las de un sistema de diseño visual.

No proporciona una interfaz gráfica independiente. Se instala como Skill en entornos compatibles con Agent Skills, como Claude Code, Codex, Factory Droid o Pi.

El flujo de trabajo es sencillo: describes en lenguaje natural lo que necesitas y el asistente utiliza las reglas de Diagram Design para generar el gráfico.

El resultado es un archivo HTML + SVG autocontenido. No requiere un proceso de build, dependencias JavaScript ni imágenes externas. Puedes abrirlo directamente en el navegador con un doble clic. Cuando sea necesario, también puedes exportarlo a SVG o PNG.

Otra función interesante es la posibilidad de importar archivos de Mermaid o draw.io y volver a dibujarlos. No se trata simplemente de convertir un formato en otro. El sistema conserva los componentes, relaciones, agrupaciones y direcciones originales y vuelve a generar la representación visual utilizando el sistema de diseño de Diagram Design.

Durante la importación se pueden ajustar cuatro parámetros:

• Formato: HTML, SVG o PNG.
• Tamaño: integrado en un documento, presentación 16:9, imagen para redes sociales, etc.
• Nivel de detalle: fiel, equilibrado o simplificado.
• Público objetivo: ingenieros, lectores mixtos o responsables de gestión.

El sistema de diseño

La principal diferencia frente a otros generadores de diagramas mediante IA está en su filosofía basada en restricciones.

El proyecto parte de una idea sencilla: la mejor forma de mejorar un diagrama muchas veces consiste en eliminar elementos. Cada nodo tiene que justificar su presencia.

Las reglas son bastante estrictas. El color de acento solo puede utilizarse en uno o dos elementos principales, mientras que el resto de nodos utiliza colores neutros.

Las coordenadas, anchuras y espacios deben ser múltiplos de 4. El radio máximo de las esquinas es de 10 px.

También existe una tipografía definida para cada función:

• Instrument Serif para títulos.
• Geist Sans para nombres de nodos.
• Geist Mono para etiquetas técnicas secundarias.

No utiliza sombras y los bordes se mantienen en líneas finas de 1 px.

La densidad de información objetivo es 4/10. El propósito de esta cifra no es conseguir que el diagrama contenga más información, sino obligar al sistema a eliminar aquello que no sea necesario.

Adaptación de marca en 60 segundos

Esta es probablemente una de las funciones más prácticas del proyecto.

Puedes indicarle al agente algo como “onboard diagram-design to https://yoursite.com” y el sistema analizará automáticamente la página principal del sitio para extraer sus colores principales y su stack tipográfico.

Después asigna esos colores a diferentes roles semánticos, como paper, ink, muted, accent y link, y muestra una vista previa para comprobar el resultado.

Una vez confirmado, la configuración se guarda en style-guide.md. A partir de ese momento, los diagramas generados utilizarán automáticamente los colores de la marca.

Además, antes de guardar los colores, el sistema comprueba automáticamente el contraste WCAG AA.

Si un color corporativo no alcanza el contraste necesario en elementos pequeños de 9-12 px, propone un ajuste y explica el motivo.

39 tipos de diagramas con calidad editorial

Diagram Design incluye 39 tipos de diagramas diseñados para obtener resultados de calidad editorial, cada uno con tres variantes estáticas: minimal light, minimal dark y full-editorial.

La cobertura es bastante más amplia que la de muchos generadores de diagramas convencionales.

Categoría	Ejemplos
Arquitectura de sistemas	Architecture, Deployment, Dependency Graph, IT Current-State
Procesos y lógica	Flowchart, Sequence, State Machine, Swimlane, Process
Datos y relaciones	ER/Data Model, UML Class, Database Schema, Data Flow, Medallion
Análisis y decisiones	Quadrant, Radar/Spider, Wardley Map, Treemap
Estrategia y planificación	Kanban, User Journey, Story Map, Pyramid/Funnel
Datos y estadísticas	Bar Chart, Line Chart, Gantt, Scatter Plot, Sankey
Casos especializados	Loop/Flywheel, Fishbone, Venn, Timeline, DP Security Matrix

Otro concepto importante es el de semantic patterns o patrones semánticos.

El proyecto separa el comportamiento del diseño del layout. Conceptos como colas, seguimiento de estrategias o límites de confianza pueden reutilizar tipos de diagramas existentes en lugar de crear continuamente nuevos formatos.

Evaluación de la calidad

Estructura y lógica

En las pruebas realizadas, Diagram Design muestra un buen rendimiento al interpretar pasos, dependencias, jerarquías y condiciones descritos mediante lenguaje natural.

Es capaz de transformar una explicación textual de un sistema en una representación visual estructurada.

Sin embargo, es importante no confundirlo con un motor de composición completamente determinista.

En una prueba comparativa con un sistema de seis nodos, la primera versión del nuevo diagrama presentó un problema con una línea de retorno cuya posición no quedaba clara y parecía detenerse a mitad del recorrido. Fue necesario revisar manualmente el SVG y ajustar la ruta para conseguir el resultado esperado.

Por tanto, aunque el sistema ayuda a estructurar la información, las conexiones, las etiquetas y la lógica final todavía deben ser revisadas por una persona.

Diseño visual

Aquí está probablemente su mayor fortaleza.

En una comparación con el mismo sistema de seis nodos, la diferencia entre un diagrama generado mediante las convenciones habituales de la IA y otro creado siguiendo las reglas de Diagram Design resulta bastante evidente.

No desaparecen nodos ni cambian las relaciones. Lo que cambia es la organización de la información mediante agrupación visual, jerarquía, puntos de atención y rutas de conexión.

El resultado tiene un aspecto más equilibrado, espacios consistentes y una jerarquía más clara. En lugar de parecer simplemente “generado”, parece que alguien ha tomado decisiones de diseño.

Los ejemplos oficiales muestran además diagramas de arquitectura que integran componentes, conexiones, títulos, explicaciones de contexto, leyendas y tarjetas de conclusión en una misma página.

Esto los hace mucho más cercanos a una ilustración terminada para un artículo o documento técnico que a un simple diagrama automático.

Capacidad de edición

Después de generarse, el diagrama existe como un archivo HTML autocontenido que puede abrirse directamente en el navegador.

También puedes modificar su HTML, CSS y SVG.

Si necesitas mover un nodo, cambiar la ruta de una conexión o modificar determinados estilos, puedes editar directamente el código. Para usuarios familiarizados con tecnologías web esto no supone un gran problema, pero sí eleva considerablemente la barrera de edición para usuarios sin conocimientos técnicos.

La importación desde Mermaid y draw.io también permite reutilizar diagramas existentes. Al volver a dibujarlos, Diagram Design genera además un registro de fidelidad que indica qué elementos se han combinado, agrupado o descartado.

Experiencia práctica

Trabajo y negocios

Para usuarios que necesitan crear procesos empresariales, workflows, planificación de proyectos y documentación interna, Diagram Design reduce considerablemente la barrera para producir gráficos profesionales.

No es necesario aprender a manejar una herramienta de diseño. Basta con describir la lógica del proceso mediante lenguaje natural.

El resultado puede utilizarse posteriormente en presentaciones o documentos.

Hay, eso sí, una consideración práctica: el formato original es HTML + SVG. Para utilizarlo en PowerPoint o Keynote normalmente tendrás que exportarlo primero como PNG o SVG.

Desarrollo de software

Este es el escenario donde Diagram Design probablemente destaca más.

Arquitecturas de software, flujos de API, estructuras de bases de datos, diagramas de despliegue y diagramas UML forman parte de los casos de uso naturales de la herramienta.

Los gráficos generados pueden utilizarse en documentación técnica, README de GitHub, artículos de blogs o revisiones de arquitectura.

Es especialmente útil para ese tipo de desarrollador que conoce perfectamente cómo funciona su sistema, pero no tiene ganas de dedicar tiempo a dibujarlo.

Describir la arquitectura mediante lenguaje natural y obtener en unos segundos un diagrama con una apariencia mucho más profesional que un esquema improvisado puede suponer un ahorro de tiempo real.

Educación

Estudiantes y profesores pueden utilizarlo para crear mapas conceptuales, diagramas de flujo, mapas mentales y explicaciones visuales.

Su principal ventaja es reducir la barrera de diseño necesaria para crear materiales educativos claros y profesionales.

Sin embargo, su enfoque está claramente orientado a los diagramas técnicos, no al dibujo libre. Para contenidos que necesitan una expresión visual muy creativa, herramientas como Excalidraw pueden ofrecer mayor flexibilidad.

Presentaciones

Los diagramas pueden exportarse como PNG o SVG para incorporarlos a presentaciones.

Es importante planificar previamente el tamaño, aunque Diagram Design ofrece un preset específico para lienzos de 16:9, lo que facilita la adaptación a diapositivas.

Si una presentación va a sufrir muchas modificaciones, lo recomendable es conservar el archivo HTML original y volver a exportarlo después de cada cambio, en lugar de editar directamente el PNG.

Facilidad de uso

Desde la instalación hasta la creación del primer diagrama existe cierto nivel de configuración técnica.

En Claude Code, por ejemplo, la instalación requiere dos comandos:

/plugin marketplace add cathrynlavery/diagram-design

y

/plugin install diagram-design@diagram-design

La principal curva de aprendizaje está relacionada con la configuración de marca.

Si simplemente quieres probar la herramienta, la paleta predeterminada funciona perfectamente. Si quieres que los diagramas coincidan realmente con la identidad visual de tu sitio, tendrás que dedicar aproximadamente 60 segundos al proceso de análisis y confirmación de colores.

Según los comentarios de usuarios, realizar esta configuración inicial merece la pena.

El ahorro de trabajo posterior puede ser considerable: no necesitas abrir Figma, alinear manualmente los nodos ni decidir constantemente qué colores y fuentes utilizar.

Pero existe una condición importante: los diagramas siguen necesitando revisión humana.

Hay que comprobar que las conexiones sean claras, que las etiquetas no sobresalgan de sus contenedores y que las relaciones lógicas sean correctas.

Diagram Design proporciona un sistema de diseño; no proporciona una garantía de que el resultado pueda publicarse sin revisar.

Precio y relación calidad-precio

Diagram Design es completamente gratuito y utiliza licencia MIT.

No tiene suscripciones, planes premium ni limitaciones funcionales de pago. El único coste es el tiempo necesario para instalarlo y configurarlo.

Para estudiantes, desarrolladores independientes y bloggers, la relación calidad-precio es especialmente atractiva: 39 tipos de diagramas, adaptación automática a la identidad de marca y resultados de calidad editorial sin coste económico.

Para equipos y empresas, su valor es especialmente evidente en documentación técnica y diseño de soluciones.

No ofrece colaboración en tiempo real ni sincronización en la nube, ya que su naturaleza es la de un Skill y no la de una plataforma SaaS. Sin embargo, los archivos HTML y SVG pueden gestionarse mediante Git o carpetas compartidas.

Ventajas

Soluciona los principales defectos visuales de los diagramas generados por IA: utiliza un sistema de diseño estricto para mantener una calidad visual coherente en lugar de dejar que la IA decida libremente el aspecto final.

Adaptación de marca en 60 segundos: analiza los colores y las fuentes del sitio web y genera diagramas coherentes con su identidad visual.

39 tipos de diagramas: cubre desde diagramas de flujo convencionales hasta formatos más especializados como Wardley Map y Sankey.

Formatos de salida flexibles: el HTML autocontenido puede abrirse directamente en el navegador y permite exportar a SVG y PNG.

Gratuito y open source: licencia MIT, sin barreras de pago y con más de 38.000 estrellas en GitHub.

Limitaciones

Requiere revisión manual: las conexiones, etiquetas y determinados elementos visuales pueden necesitar ajustes.

Resultados no deterministas: una misma instrucción puede producir resultados ligeramente diferentes, lo que no resulta ideal para proyectos donde se necesita una consistencia absoluta.

Edición técnica: modificar directamente un diagrama requiere conocimientos de HTML, CSS o SVG.

Sin colaboración en tiempo real: no dispone de sincronización en la nube, comentarios ni edición simultánea entre varios usuarios.

Las etiquetas en chino requieren fallback de fuentes: el proyecto indica expresamente que es necesario configurar fuentes alternativas para evitar problemas de visualización.

Configuración inicial: el proceso de adaptación de marca requiere algunos pasos adicionales y puede parecer innecesario para quienes solo quieren probar rápidamente la herramienta.

¿Para quién es Diagram Design?

Especialmente recomendable para:

• Redactores técnicos y bloggers.
• Desarrolladores y arquitectos de software.
• Product managers.
• Profesionales que necesitan crear diagramas técnicos con frecuencia pero no quieren abrir Figma.
• Desarrolladores independientes que quieren que sus gráficos respeten automáticamente su identidad de marca.

Menos recomendable para:

• Diseñadores que ya dominan Figma y necesitan control a nivel de píxel.
• Equipos que necesitan colaboración en tiempo real.
• Usuarios que necesitan dibujo libre, ilustraciones o estilos deliberadamente manuales.
• Personas que solo necesitan pequeños diagramas Unicode directamente desde el terminal.

Diagram Design frente a otras herramientas

La principal diferencia frente a Lucidchart, Miro y draw.io está en la forma de trabajar.

Lucidchart y draw.io son fundamentalmente herramientas de dibujo manual: arrastras formas, conectas flechas y ajustas posiciones.

Diagram Design utiliza un enfoque descriptivo: describes la lógica mediante lenguaje natural y la IA genera el diagrama.

Frente a Mermaid, la diferencia principal está en el control visual.

En Mermaid, el motor de layout determina gran parte del aspecto final y el usuario tiene un control relativamente limitado sobre el resultado. Por eso es frecuente terminar con cajas redondeadas y estilos bastante genéricos.

Diagram Design introduce un sistema de diseño que limita las decisiones visuales de la IA y establece previamente cómo deben organizarse los elementos.

Frente a Excalidraw, la diferencia está principalmente en el estilo.

Excalidraw busca una estética informal, cercana al dibujo manual y adecuada para la expresión creativa. Diagram Design busca una apariencia profesional, editorial y coherente con una identidad de marca.

Son herramientas pensadas para necesidades diferentes.

Veredicto final

Lo que Diagram Design resuelve especialmente bien: el problema de que los diagramas generados por IA sean técnicamente correctos pero visualmente poco utilizables.

Mediante un sistema de diseño estricto, consigue transformar un resultado de tipo “se puede utilizar, pero no queda bien” en algo mucho más cercano a una pieza profesional y lista para documentación, artículos o presentaciones.

Su mayor limitación: no es un motor de composición determinista. El resultado todavía debe revisarse y, si quieres modificarlo manualmente, necesitas cierta capacidad para editar código.

Dónde ahorra más trabajo: en la adaptación a la identidad visual y en las decisiones de diseño. Ya no necesitas dedicar media hora a elegir colores, alinear nodos o decidir qué tipografía utilizar.

En cambio, la comprobación de la lógica y los últimos ajustes siguen requiriendo intervención humana.

Usuario ideal: redactores técnicos, desarrolladores, arquitectos, product managers y cualquier persona que necesite producir diagramas profesionales con ayuda de IA.

¿Merece la pena pagar por él?: no. Es gratuito.

¿Puede convertirse en una herramienta de uso diario?: sí, especialmente para quienes crean diagramas técnicos con frecuencia. Después de la instalación, solo hay que activarlo cuando sea necesario y la configuración de marca se realiza una sola vez.

Valoración final: 4,2/5,0

La puntuación tiene en cuenta la calidad visual, precisión, facilidad de uso, capacidad de edición, variedad de diagramas, velocidad, exportación, estabilidad, precio y utilidad a largo plazo.

La principal penalización procede del carácter no determinista de los resultados y del tiempo adicional necesario para verificar y corregir algunos diagramas.

Diagram Design es una herramienta realmente diseñada para un caso de uso específico. No intenta convertirse en una plataforma de dibujo universal ni sustituir a Figma o Lucidchart.

Su propuesta es mucho más concreta: conseguir que los diagramas generados por un asistente de programación con IA parezcan diseñados por alguien, no simplemente generados por una IA.

Para los usuarios hispanohablantes que utilizan asistentes de programación y necesitan crear diagramas profesionales con frecuencia, es una herramienta que merece la pena probar.