HelloPixDig

Directorio › Diseño y web › Diagram Design

Diagram Design
Imagen: repositorio oficial del proyecto

> JOYA DISEÑO Y WEB · SKILLS PARA AGENTES · AGENTES Y AUTOMATIZACIÓN

Diagram Design

por Cathryn Lavery

Una skill para tu agente de código que dibuja diagramas cuidados: un único archivo HTML con SVG, con los colores de tu marca.

MIT GratisOpen source
Ver en GitHub →

Qué hace

  • 44 tipos de diagramas: arquitectura, flujo, cronología, cuadrante, Sankey, Gantt, mapa de Wardley, recorrido de usuario…
  • Salida en un único archivo HTML + SVG autónomo, exportable a SVG o PNG
  • Compatible con Claude Code, Codex, Cursor, GitHub Copilot, Factory Droid y Pi

! El resultado puede variar de una prueba a otra y no es un formato editable (sin texto para versionar, sin lienzo que mover). Para documentación versionada en Git, Mermaid sigue siendo más adecuado; esto es para el diagrama que publicas. Cifras y funciones sacadas del repositorio, no probadas por PixDig.

Instalarlo

Requisitos: Un agente de código compatible, por ejemplo Claude Code.

En Claude Code, añade el repositorio de plugins
/plugin marketplace add cathrynlavery/diagram-design
Instala la skill
/plugin install diagram-design@diagram-design

El prompt para tu agente

Pégalo en tu agente de código: comprueba los requisitos y lo instala por ti.

Claude CodeCodexCursorGemini CLIopencode
Prompt
Instala Diagram Design (https://github.com/cathrynlavery/diagram-design) en mi equipo.
1. Comprueba los requisitos: Un agente de código compatible, por ejemplo Claude Code. Si falta algo, avísame antes de instalar nada.
2. Sigue el método oficial:
- En Claude Code, añade el repositorio de plugins: /plugin marketplace add cathrynlavery/diagram-design
- Instala la skill: /plugin install diagram-design@diagram-design
3. Comprueba que funciona y explícame cómo iniciarlo y por dónde empezar.

Revisa siempre lo que tu agente va a ejecutar, sobre todo los comandos de instalación.