La idea clave
Ayuda a representar ideas con gráficos que puedes retocar. El primer paso es decidir si necesitas explicar una secuencia, una responsabilidad o una comparación.
Hay explicaciones que mejoran en cuanto se convierten en un dibujo. El problema aparece cuando el gráfico añade adornos y deja intacta la confusión. Diagram Design ofrece a los agentes una base de diseño para convertir relaciones, procesos y comparaciones en piezas visuales cuyo HTML y SVG pueden retocarse por código.
Qué produce
La documentación consultada recoge más de cuarenta tipos de diagramas en su galería (consulta del 21/10/2026) y variantes claras, oscuras y editoriales. La salida utiliza HTML y SVG; las variantes estáticas pueden abrirse en el navegador sin un proceso de compilación. El movimiento es opcional. El repositorio se distribuye con licencia MIT.
Los tipos incluyen flujos, cronologías, jerarquías y relaciones entre componentes. La skill puede guiar a un agente compatible para adaptar el resultado a un estilo visual y a un nivel de detalle determinado.
Cómo elegir el dibujo adecuado
Antes de pedir un gráfico, decide qué pregunta debe contestar. «¿Quién aprueba una devolución?» necesita mostrar responsabilidades y decisiones. «¿Cuándo ocurrió cada cambio?» necesita una cronología. «¿Qué parte ocupa cada categoría?» requiere datos comparables. Cambiar la forma del dibujo sin resolver esa pregunta solo cambia la decoración.
Un ejemplo nuestro de encargo sería: «Explica el recorrido de una devolución en cuatro pasos; diferencia cliente y tienda; marca el momento en que se decide el reembolso. Debe leerse en un móvil». Ese límite obliga a seleccionar la información relevante.
Del encargo vago a una pregunta visual
Ejemplo editorial
Encargo impreciso: «Haz un diagrama bonito de las devoluciones».
Encargo revisable: «Muestra quién recibe la solicitud, quién comprueba el pedido y quién autoriza el reembolso. Separa cliente y tienda. Incluye qué ocurre cuando falta el justificante».
La segunda versión permite comprobar el resultado: deben aparecer las responsabilidades, la decisión y la excepción. Un diagrama puede omitir muchos detalles y seguir siendo útil si responde a esa pregunta. Abre también el archivo a tamaño de móvil: si necesitas ampliar cada etiqueta, reduce contenido antes de reducir la letra.
Qué revisar antes de compartirlo
Elige un ejemplo oficial que se aproxime al caso y sigue las instrucciones de instalación para tu agente. Pide primero una versión estática. Después comprueba el tamaño de las etiquetas, el contraste, el orden de lectura y el significado de cada conexión.
En un gráfico de datos, revisa además escalas, unidades y procedencia de los valores. Una herramienta puede producir una composición convincente con cifras incorrectas si el encargo las contiene. La revisión visual y la revisión factual son trabajos diferentes.
En qué se diferencia de Archify
Nuestra lectura editorial es que Diagram Design invita a empezar por la comunicación visual de una idea, mientras que Archify pone especial énfasis en representar sistemas mediante una estructura validable. Hay solapamiento; el criterio útil es qué necesitas revisar después.
Para una explicación destinada a un artículo o una presentación, la posibilidad de retocar el archivo sin regenerar una imagen entera resulta atractiva. Conserva también una explicación textual: el diagrama debería facilitar la lectura a quienes puedan verlo, sin dejar fuera a quienes necesiten otra forma de acceder al contenido.
Un encargo completo y una comprobación en móvil
Plantilla editorial de Texploto; no es una ejecución de la skill
Este proceso ficticio sirve para concretar un encargo sin inventar datos de una empresa:
- El cliente envía una solicitud.
- La tienda comprueba si contiene el número de pedido.
- Si falta, solicita ese número y vuelve a comprobarlo.
- Si está presente, deriva el caso a revisión. No se presupone que el reembolso esté aprobado.
Crea un diagrama estático y editable del proceso anterior. Distingue cliente y tienda mediante etiquetas, además de color. La decisión debe tener salidas «Sí» y «No»; la petición de datos debe volver a la comprobación. El final es «Caso enviado a revisión». Incluye una explicación textual equivalente. A 390 píxeles de ancho, usa una disposición vertical y mantén las etiquetas legibles sin ampliar.
Comprueba el resultado siguiendo ambos caminos con el dedo. Si la salida «No» no regresa a la comprobación, falta una relación. Si el final dice «Reembolso aprobado», se ha añadido una decisión que no estaba en el encargo.
En móvil, revisa que las flechas no tapen texto, que ninguna etiqueta se corte y que el orden siga siendo comprensible sin distinguir colores. Si exportas a imagen, conserva también el archivo editable y la explicación textual.
Para un proceso descrito en un manual, puedes empezar por extraer y comprobar el texto con MarkItDown. Antes de dibujar, utiliza la revisión de alcance y condiciones para evitar que una etiqueta breve cambie la idea.
Guía basada en la documentación consultada el 13 de septiembre de 2026; no hemos realizado una prueba funcional del proyecto. Consulta también los diez proyectos de esta edición semanal.
La pregunta decisiva: ¿publicar el gráfico o mantenerlo cada semana?
El README actual distingue retocar el SVG de conservar un formato fuente editable: Diagram Design no ofrece un lienzo para arrastrar cajas ni una representación semántica estable para comparar cambios. Pedir otra generación puede cambiar la composición.
| Necesidad | Qué conservar | Opción a valorar |
|---|---|---|
| Explicación terminada para un artículo | HTML/SVG y texto equivalente | Diagram Design |
| Arquitectura que se revisa contra código | Fuente estructurada y evidencia por relación | Archify y revisión por versiones |
| Documentación que cambia con cada PR | Texto con diferencias legibles en Git | Mermaid o una fuente de diagramas equivalente |
Esta tabla es una comparación documental, no una prueba de las herramientas. Para una entrega sin peticiones externas, la documentación de Diagram Design permite solicitar fuentes del sistema; las tipografías predeterminadas se descargan de Google Fonts. Un HTML autocontenido no significa automáticamente cero red.
Revisión del 21/10/2026: actualizados el catálogo y el alcance de la edición; añadida una decisión práctica según el mantenimiento del diagrama. No se ha instalado ni ejecutado la skill.
