leer hallazgo 03 · boletín 2026-09-09

cathrynlavery/diagram-design

skill con 39 tipos de diagramas editoriales para Claude Code, Codex, Factory Droid, Pi y hosts Agent-Skills-compatible. HTML+SVG self-contained (sin JS, sin imágenes externas), 3 variantes (minimal light/dark, full-editorial), matchea tu brand leyendo tu web. Redibuja draw.io/Mermaid a formato/tamaño/detalle elegido.

Estrellas

35.524

Forks

—

Lenguaje

HTML

Licencia

MIT

Issues

—

Estado

—

Cómo funciona

Implementa agent-document-output

Núcleo

cathrynlavery/diagram-design HTML · MIT

Se cruza con relevante para agent-as-designer implemented_by agent-skill-diagram

Diagrama derivado de madurez_senales (lenguaje, licencia, estado y topics) y de las relaciones que este repo tiene en el grafo de conocimiento. No es una arquitectura del proyecto: es su posición funcional tal como la registran los boletines.

Posición en el ecosistema

cathrynlavery/diagram-design

implementa

agent-document-output Concepto · y univer

cathrynlavery/diagram-design

relevante para

agent-as-designer Concepto · y nexu-io/open-design

agent-skill-diagram

implemented_by

cathrynlavery/diagram-design Concepto

Expandir en el grafo 3D →

Relaciones que aportó este boletín

competes_withmermaid· 2026-08-15 competes_withdrawio· 2026-08-15 implemented_bycathrynlavery/diagram-design· 2026-08-15 enhanced_bycathrynlavery/diagram-design· 2026-08-15

Por qué importa

El2026-08-15 ya cubrimos el problema: cuando un agente dibuja arquitectura, el resultado suele ser Mermaid-slop o cajas redondeadas genéricas (también hablamos de draw.io como referencia del estándar a superar). Esta skill ataca eso tratando el dibujo como problema editorial con 39 tipos de diagrama y HTML+SVG self-contained (sin JS, sin imágenes externas), tres variantes (minimal light/dark y full-editorial), e incluso lee tu web para extraer tu accent color y densidad visual. Su principio rector, 'the highest-quality move is usually deletion; target density 4/10', es la capa de diseño más pura que hemos visto frente a alternativas como coldteadotai/pr-lens o tt-a1i/archify.

Alerta

entender el catálogo de tipos y los principios editoriales; reutilizar 2-3 como base para un newsletter técnico

diagram-design detecta brand desde tu web publica: antes de adoptarlo, revisar que la URL de ejemplo no filtre estilos o datos no intended.

Acción concreta

diagram-design encaja directamente con el eje de diagramas editoriales de CSS y complementa pr-lens y archify con una capa mas pura de diseno.

Apariciones · 3

2026-10-10 radar
2026-09-11 radar
2026-09-09 hallazgo principal

Señales de madurez (texto original)

35.524 ★ · fork=False · HTML · creado 2026-04-16 · último push 2026-09-08 · MIT · descripción: "Editorial diagrams your designer won't hate. 39 types for Claude Code, Codex, Factory Droid, Pi" · topics (8).