Diagram Design
cathrynlavery/diagram-designRevisado por IA
Qué hace
Una skill que instalas dentro de un asistente de IA para programar (Claude Code, Codex, Cursor, Copilot y otros). Describes el diagrama con tus propias palabras y el asistente escribe un único archivo HTML autocontenido con el dibujo dentro, en un estilo editorial consistente: 45 tipos, desde arquitectura y diagramas de flujo hasta Gantt, Sankey y organigramas. Puede copiar los colores y las fuentes de tu sitio web para que los diagramas combinen con tu marca, volver a dibujar archivos existentes de draw.io, Mermaid o Excalidraw, y guardar el resultado como SVG o PNG. Necesitas un asistente de IA, que normalmente requiere un plan de pago.
Facilidad de instalación
C · instalar 1 o 2 herramientas · Windows
- Windows C
- macOS C
- Linux C
En cualquiera de los tres sistemas primero necesitas tener instalado un asistente de IA, y luego uno o dos comandos: `npx skills add cathrynlavery/diagram-design` (que necesita Node) o, en Claude Code, `/plugin marketplace add` más `/plugin install`. Los diagramas terminados son archivos HTML simples que se abren con doble clic. En Windows el README indica que los enlaces simbólicos necesitan el Modo de desarrollador, y si no, el instalador hace copias; además, exportar a PNG requiere una instalación adicional (`pip install playwright && playwright install chromium`).
Números en GitHub
- Estrellas
- 63.485el 31 oct 2026
- Descargas
- —todas las versiones
- Crecimiento
- +2107estrellas en 5 días
Estrellas a lo largo del tiempo
Datos
- Funciona en
- Windows, macOS, Linux
- Necesitas instalar
- Otras herramientas, Node.js
- Espacio en disco
- no determinado
- Cuentas o claves
- Ninguna
- Costo
- Gratis, la API se paga · La skill es gratuita (MIT). Solo funciona dentro de un asistente de IA, que normalmente necesita un plan de pago o uso pagado de API, y cada diagrama consume parte de ese cupo.
- Licencia
- MIT (Permisiva)
- Puede reemplazar
- Lucidchart, Visio, Figma
- Última actualización
- 27 oct 2026
Señales de riesgo (4)
- InfoLee tu sitio web para extraer la identidad visual
Flujo de incorporación del README: "onboard diagram-design to https://yoursite.com" → "fetches the homepage → extracts the dominant palette + font stack". El asistente visita un sitio que tú indicas y escribe los colores en references/style-guide.md. El README remite a PRIVACY.md para saber qué envía la skill por la red.
revisión con IA
- InfoLos diagramas descargan Google Fonts
README, Offline fonts: "By default a diagram loads Instrument Serif, Geist and Geist Mono from Google Fonts, the only network request it makes." Si se piden fuentes del sistema, el archivo queda completamente sin conexión.
revisión con IA
- InfoAviso sobre fichas copiadas
README Install: "Official builds come only from this repository. LittleMight, Cathryn Lavery's company, publishes the plugin directory listings; a listing under any other name is an unofficial copy."
revisión con IA
- InfoLos resultados varían entre ejecuciones
README, How it compares: "The downsides are real. Output quality depends on the model you run it with, and the same prompt can lay out differently twice. The result is not an editable source format: there is no text to diff in a pull request and no canvas to drag a box on."
revisión con IA
La evidencia aparece en su idioma original.
Lo que Radar no pudo verificar
- Qué tan buenos son los diagramas con tu propio asistente y modelo, ya que el autor dice que el resultado depende de ambos
- Si la incorporación de marca realmente elige los colores y fuentes correctos de un sitio web dado
- Qué envían por la red la skill y los archivos generados, además de la solicitud a Google Fonts
- Si todos los entornos mencionados (Cursor, Copilot, Qoder, Pi, Kiro y el resto) la instalan como se describe, especialmente en Windows
- Cuánto de tu plan de IA consume cada diagrama