Repolode
Enviar
cathrynlavery

cathrynlavery/diagram-design

Una skill de agente que crea diagramas editoriales en un único archivo HTML + SVG autocontenido, con 45 tipos de diagramas y adaptación a la marca.

Alternativa open source a:FigmaLucidchart

Ver en GitHubSitio web
Estrellas
58,066
Forks
3,725
Issues abiertos
47
Último commit
hace 4 días

¿Qué es?

Diagram Design es una skill de agente para agentes de programación como Claude Code, Codex, GitHub Copilot, Cursor y Pi. Describes el diagrama en lenguaje natural y el agente elige uno de los 45 tipos y escribe un único archivo HTML con SVG integrado, que se abre directamente en el navegador, sin necesidad de compilar ni usar JavaScript.

La skill aplica un estilo editorial definido: un color de acento discreto, líneas finas de 1 px, sin sombras y coordenadas en una cuadrícula de 4 px. Durante la configuración inicial, puede leer los colores y las fuentes de tu sitio web para que todos los diagramas posteriores sigan la identidad de tu marca, y comprueba el contraste WCAG AA antes de escribir los tokens.

El proyecto también puede redibujar archivos existentes de draw.io, Mermaid y Excalidraw con este estilo, y exportar diagramas a SVG o PNG. El agente decide la disposición en lugar de un motor automático, por lo que el resultado puede variar entre ejecuciones.

Funciones clave

  • 01Genera un único archivo HTML autocontenido con SVG integrado, que se abre en cualquier navegador.
  • 02Admite 45 tipos de diagramas, incluidos diagramas de arquitectura, de secuencia, de flujo, ER, Gantt y gráficos.
  • 03Extrae la paleta de colores y las fuentes de un sitio web para aplicar la identidad de marca a todos los diagramas.
  • 04Redibuja archivos existentes de draw.io, Mermaid y Excalidraw con el mismo estilo.
  • 05Exporta diagramas a SVG o PNG, con un modo opcional para usar fuentes sin conexión.

Casos de uso

  • Crear diagramas de arquitectura o de secuencia para una entrada de blog técnico o una página de documentación.
  • Convertir un diagrama de Mermaid o draw.io en una imagen cuidada para diapositivas.
  • Mantener la coherencia de los diagramas con la identidad de marca del sitio web de una empresa en todo un proyecto.
  • Crear gráficos de cuadrantes, Venn o líneas de tiempo para presentaciones.

Inicio rápido

  1. 1

    Instala la skill con skills CLI

    npx skills add cathrynlavery/diagram-design
  2. 2

    En Claude Code, añade el marketplace de plugins (opcional)

    /plugin marketplace add cathrynlavery/diagram-design
  3. 3

    En Claude Code, instala el plugin (opcional)

    /plugin install diagram-design@diagram-design
  4. 4

    Pídele a tu agente con palabras sencillas que cree un diagrama; generará un único archivo .html que podrás abrir en el navegador

Antes de usarlo

  • La calidad del resultado depende del modelo utilizado, y el mismo prompt puede generar diseños diferentes.
  • El resultado no está en un formato fuente editable, así que no hay texto del que ver diferencias ni un lienzo que editar directamente.
  • Según el README, las actualizaciones del paquete pueden reemplazar la guía de estilo de la skill si la personalizas mediante una instalación administrada.

Temas

#agent-skills#diagrams#svg#data-visualization#claude-code#html#mermaid#codex#drawio

Preguntas frecuentes

¿Qué es diagram-design?
Una skill de agente que crea diagramas editoriales en un único archivo HTML + SVG autocontenido, con 45 tipos de diagramas y adaptación a la marca. Diagram Design es una skill de agente para agentes de programación como Claude Code, Codex, GitHub Copilot, Cursor y Pi. Describes el diagrama en lenguaje natural y el agente elige uno de los 45 tipos y escribe un único archivo HTML con SVG integrado, que se abre directamente en el navegador, sin necesidad de compilar ni usar JavaScript.
¿diagram-design es gratuito? ¿Qué licencia tiene?
diagram-design es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿diagram-design sigue mantenido?
Mantenimiento activo. El último commit de diagram-design fue el 16 oct 2026.
¿Para qué puedo usar diagram-design?
Crear diagramas de arquitectura o de secuencia para una entrada de blog técnico o una página de documentación. Convertir un diagrama de Mermaid o draw.io en una imagen cuidada para diapositivas. Mantener la coherencia de los diagramas con la identidad de marca del sitio web de una empresa en todo un proyecto. Crear gráficos de cuadrantes, Venn o líneas de tiempo para presentaciones.
¿Cómo se instala diagram-design?
Instala la skill con skills CLI: npx skills add cathrynlavery/diagram-design En Claude Code, añade el marketplace de plugins (opcional): /plugin marketplace add cathrynlavery/diagram-design En Claude Code, instala el plugin (opcional): /plugin install diagram-design@diagram-design Pídele a tu agente con palabras sencillas que cree un diagrama; generará un único archivo .html que podrás abrir en el navegador
¿Dónde consigo diagram-design?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/cathrynlavery/diagram-design

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados