Diagram Design: diagramas listos para publicar sin pelearte con Figma
Si pides un diagrama a un agente, sueles recibir cajas redondeadas genéricas que no casan con tu web. Diagram Design convierte el gusto en reglas: un solo color de acento para uno o dos nodos clave, líneas de 1 px, sin sombras y todas las coordenadas en una rejilla de 4 px. El resultado es un único HTML con SVG integrado que se abre con doble clic.
45 tipos, entre ellos arquitectura, diagrama de flujo, secuencia, modelo ER, cronología, carriles, cuadrante, Sankey, Wardley y Gantt
Cada tipo en tres variantes estáticas: mínima clara, mínima oscura y editorial completa, sin compilación ni imágenes externas
Adaptación a la marca: con la URL de tu web toma paleta y fuentes; los perfiles de cliente se guardan en ~/.diagram-design/profiles/
Importa archivos de draw.io, Mermaid y Excalidraw y exporta el resultado a SVG o PNG
Antes del primer diagrama de un proyecto pregunta si quieres personalizar el estilo, para no publicar con los colores por defecto
Cuándo usarla
Necesitas un diagrama de arquitectura para un artículo del blog que parezca parte de la web y no una captura
Preparas una presentación para dirección y quieres un cuadrante de proyectos por impacto y esfuerzo
Hay que redibujar diagramas antiguos de Mermaid o draw.io con un estilo de casa coherente
Pídale al agente
Hazme un diagrama de arquitectura de la app: frontend, backend, base de datos y caché Redis
Necesito un cuadrante de los proyectos del segundo trimestre por impacto y esfuerzo
Adapta diagram-design a nuestra web y redibuja este diagrama de Mermaid
Preguntas
¿Cómo se instala Diagram Design?
Con npx skills add cathrynlavery/diagram-design. En Claude Code conviene el plugin, /plugin marketplace add cathrynlavery/diagram-design y /plugin install diagram-design@diagram-design, que trae actualizaciones y comandos.
¿Funciona Diagram Design en Codex y Cursor?
Sí. El README ofrece un plugin para Codex con codex plugin marketplace add, en Cursor se instala con npx skills y también admite Copilot, Gemini CLI, Windsurf y otros.
¿En qué se diferencia Diagram Design de Mermaid?
Mermaid es texto que se guarda en Git y se compara. Diagram Design entrega una imagen lista para publicar con tu marca, pero sin fuente editable, y la autora recomienda Mermaid para documentación que cambia a menudo.
