Crea diagramas editoriales profesionales con Claude Code: Guía completa de diagram-design
Aprende a instalar y usar la skill diagram-design en Claude Code para generar 38 tipos de diagramas editoriales (timelines, arquitecturas, flujos) en HTML/SVG autocontenido. Ideal para carruseles, videos e informes.
Por Martin Reche ·
Martin Reche · Sistemas de conversión con IA para negocios
Hemos construido sistemas de conversión para más de 50 negocios: desde el anuncio en Meta Ads hasta el cliente cerrado, pasando por la cualificación del lead y la venta. Todo lo que ves en esta guía está funcionando en negocios reales.
QUÉ ES Y POR QUÉ TE INTERESA
Diagramas editoriales profesionales sin tocar diseño
diagram-design es una skill para Claude Code (también compatible con Codex y Pi) que convierte descripciones de texto en diagramas editoriales de alta calidad: limpios, profesionales y listos para publicar. A diferencia de las flechas torcidas de las herramientas tradicionales, genera archivos HTML y SVG autocontenidos — un solo archivo que abres en el navegador y funciona perfecto. Con 38 tipos de diagramas diferentes (líneas de tiempo, arquitecturas de sistema, comparativas, flujos de proceso) y 25 mil estrellas en GitHub, esta herramienta transforma cómo explicas conceptos complejos. Y aquí está el valor real para creadores: cada diagrama es una diapositiva de carrusel, una pantalla de video o una página de informe ejecutivo. Explicar bien es el 80% de vender bien.
Dato clave: Los diagramas son 100% autocontenidos (un solo archivo HTML/SVG), responsive y listos para incrustar en web, PDF o redes sociales sin dependencias externas.
El flujo completo
1. Prepara
Claude Code instalado y acceso al repositorio
2. Instala
Agrega la skill diagram-design a Claude Code
3. Genera
Usa prompts naturales para crear diagramas editoriales
4. Exporta
Obtén archivos HTML/SVG para carruseles, videos o informes
LA VÍA RÁPIDA
Que Claude Code lo instale todo por ti
No necesitas tocar la terminal ni editar archivos de configuración manualmente. Copia este prompt, pégalo en Claude Code y deja que el agente haga todo el trabajo técnico por ti.
Instala la skill diagram-design desde https://github.com/cathrynlavery/diagram-design en mi Claude Code.
Pasos a seguir:
1. Clona el repositorio en mi equipo
2. Instala todas las dependencias necesarias (Node.js, Python o lo que requiera)
3. Configura la skill correctamente siguiendo el README del repo
4. Verifica que la instalación funcione generando un diagrama de prueba simple
5. Muéstrame cómo listar los 38 tipos de diagramas disponibles
6. Explica brevemente qué comando debo usar para invocar la skill en el futuro
Ve contándome cada paso que vas realizando y confírmame cuando todo esté listo para usar.Ventaja: Claude Code gestionará automáticamente las rutas de archivos, permisos y configuración. Si algo falla, te dirá exactamente qué corregir.
REQUISITOS
Qué necesitas antes de empezar
Claude Code
CLI oficial de Anthropic. Descárgalo si aún no lo tienes.
npm install -g @anthropic-ai/claude-codeGit
Para clonar el repositorio de la skill
git --versionNode.js 18+
Necesario para ejecutar Claude Code y posibles dependencias
node --version¿Te trabas en algún paso? Lo vemos en una llamada desde 49€, con acciones por escrito.
Ver sesionesINSTALACIÓN MANUAL
Si prefieres hacerlo paso a paso (o falló la vía automática)
Clona el repositorio oficial
Abre tu terminal y clona el repo en una carpeta de tu elección. Este comando descarga los 38 tipos de diagramas y la lógica de la skill.
git clone https://github.com/cathrynlavery/diagram-design.git
cd diagram-designInstala las dependencias del proyecto
Dentro de la carpeta clonada, instala los paquetes necesarios. Generalmente estos proyectos usan npm o pnpm.
npm install
# o si ves un archivo pnpm-lock.yaml:
pnpm installRegistra la skill en Claude Code
Necesitas indicarle a Claude Code que esta carpeta es una skill disponible. El método exacto depende de tu versión de Claude Code, pero generalmente implica copiar la carpeta al directorio de skills de Claude o ejecutar un comando de registro local.
# Opción A: Copiar a directorio de skills de Claude
# (La ruta varía según tu sistema operativo)
# macOS/Linux ejemplo:
cp -r . ~/.claude/skills/diagram-design
# Opción B: Si el repo incluye un script de instalación
npm run install-skill
# o
claude skill add .Importante: La instalación exacta puede variar según la versión actual del repositorio. Si los comandos anteriores no funcionan, consulta el archivo README.md dentro de la carpeta clonada (`cat README.md`) para obtener las instrucciones específicas actualizadas.
Verifica que funciona
Abre Claude Code en cualquier carpeta de proyecto y prueba pedir un diagrama simple para confirmar que la skill responde.
Crea un diagrama de flujo simple que muestre los pasos: Idea → Diseño → Publicación → MétricasLOS 38 TIPOS DE DIAGRAMAS
Catálogo completo de visualizaciones disponibles
La skill incluye 38 tipos de diagramas editoriales diferentes. Según el README oficial, estos incluyen visualizaciones profesionales como:
- Líneas de tiempo verticales y horizontales (Timelines)
- Diagramas de arquitectura de sistemas
- Flujos de procesos y decisiones
- Comparativas lado a lado
- Gráficos de jerarquías organizacionales
- Roadmaps estratégicos
- Diagramas de flujo de usuario (User flows)
- Arquitecturas de software multicapa
- Timelines de proyectos con milestones
- Y 29 tipos adicionales de diagramas editoriales
Cómo verlos todos: Una vez instalada la skill, escribe en Claude Code: "Muestra los 38 tipos de diagramas disponibles" o "Lista todos los tipos de diagrama que puedes crear". El agente te mostrará el catálogo completo con descripciones de cuándo usar cada uno.
PROMPTS QUE FUNCIONAN
Cómo pedir diagramas que queden perfectos
La calidad del diagrama depende de cómo describas lo que necesitas. Estos son patrones de prompts que generan mejores resultados:
⚡
Para procesos
"Diseña un diagrama de flujo que muestre el proceso de [X] desde [inicio] hasta [fin], incluyendo los puntos de decisión [A] y [B]"
🏗️
Para arquitectura
"Crea un diagrama de arquitectura de sistema mostrando: Frontend en React, Backend API en Node.js, Base de datos PostgreSQL, y Cache Redis. Muestra las conexiones entre capas"
📅
Para timelines
"Genera una línea de tiempo horizontal de Q1-Q2 2024 con los milestones: Lanzamiento MVP (Enero), Primera ronda (Marzo), Escalamiento (Mayo)"
⚖️
Para comparativas
"Haz una comparación lado a lado de [Opción A] vs [Opción B] destacando: Precio, Velocidad, Facilidad de uso y Soporte"
Tip avanzado: Especifica el contexto de uso. Si dices "esto es para un carrusel de Instagram", Claude ajustará las proporciones y el tamaño de fuente para que se lean bien en móvil.
USOS PARA CREADORES
Lo no obvio: contenido que vende
El guion original revela el uso menos obvio pero más valioso: estos diagramas son piezas de contenido completas, no solo documentación interna.
🎠
Carruseles sociales
Cada diagrama es una diapositiva. Crea carruseles de 5-10 slides explicando conceptos complejos (funnels, estrategias, procesos) con diseño editorial de revista.
🎬
Pantallas de video
Usa los SVG como overlays o pantallas completas en videos explicativos. Son limpios, profesionales y mantienen la atención mejor que el texto plano.
📊
Informes ejecutivos
Eleva tus reportes de cliente o jefes: arquitecturas de proyectos, timelines de entregas o comparativas de herramientas en formato visual de consultora.
ERRORES COMUNES Y SOLUCIONES
Qué suele fallar y cómo arreglarlo
¿Puedo usarlo como pizarra infinita para brainstormear?
No. Esta skill genera diagramas editoriales terminados para explicar, no es una herramienta de dibujo libre tipo Miro o Figma. Si necesitas iterar rápido y mover elementos a mano, usa una pizarra digital tradicional.
¿Reemplaza a Illustrator o Figma?
No es un reemplazo de diseño gráfico profesional. Es para explicar ideas rápidamente con buen diseño editorial, no para crear identidades de marca o ilustraciones complejas. El resultado es funcional y limpio, no artístico.
Los diagramas no se ven bien en móvil
Especifica en el prompt: 'Optimizado para visualización en móvil' o 'Formato vertical para Instagram'. Los SVG son responsive, pero el layout inicial debe pedirse pensando en el formato final.
Claude Code no reconoce el comando 'diagram-design'
Verifica que la skill esté correctamente registrada en el directorio de skills de Claude. Reinicia Claude Code (`exit` y vuelve a entrar) para que recargue las skills disponibles.
RESULTADO ESPERADO
Cómo saber que lo hiciste bien
- Puedes escribir 'Crea un diagrama de...' en Claude Code y recibes un archivo HTML o SVG descargable
- Los archivos se abren en Chrome/Safari sin necesidad de servidores ni conexión a internet
- El diseño es limpio, con tipografía legible y colores profesionales (no flechas torcidas)
- Puedes generar al menos 5 tipos diferentes de diagramas sin errores
QUÉ PUEDES HACER AHORA CON ESTO
Aplica lo aprendido hoy mismo
📄
Pásale un PDF de factura
Pide a Claude que extraiga los datos y genere un diagrama de flujo del proceso de pago o una comparativa de gastos por categoría visual.
🧠
Explica tu modelo de negocio
Crea un diagrama de 'Value Proposition Canvas' o 'Business Model Canvas' en formato visual para tu pitch deck o LinkedIn.
🚀
Documenta tu stack técnico
Genera una arquitectura visual de tu SaaS actual (frontend, backend, BD, servicios externos) para la página 'Cómo funciona' de tu web.
📅
Timeline de tu proyecto
Crea una línea de tiempo visual de los próximos 6 meses de tu proyecto y úsala como imagen destacada en Notion o en una presentación a inversores.
Repositorio oficial
Accede al código fuente, actualizaciones y documentación completa del proyecto.
Si quieres ir más rápido
Sistemas de conversión que funcionan, no demos de IA
Soy Martin Reche. Hemos construido sistemas de conversión para más de 50 negocios: desde el anuncio en Meta Ads hasta el cliente cerrado, pasando por la cualificación del lead y la venta. Todo lo que ves en esta guía está funcionando en negocios reales. Si quieres aplicarlo a tu caso, lo vemos en una llamada: te digo qué montar, con qué y en qué orden, y te lo dejo por escrito. Y si prefieres que lo montemos por ti, eso es NovaChat.
Sistemas de conversión
Del anuncio al cliente cerrado: captación, seguimiento y venta en un solo flujo que funciona.
Cualificación de leads
Cada contacto se filtra, se atiende y se lleva a la venta sin que nadie lo persiga a mano.
Agentes de IA que atienden y venden
Voz, WhatsApp, web e Instagram: responden, cualifican y cierran citas 24/7.
Consultoría 1:1
Desde 49 €: te digo qué montar, con qué y en qué orden, por escrito.
Consultoría 1:1 · Google Meet
Una llamada y sales sabiendo qué hacer y qué no
Me cuentas tu caso en un formulario de dos minutos, pagas, eliges hora. Garantía simple: si en los primeros 10 minutos veo que no te puedo ayudar, te devuelvo el importe. Pack de 3 Revisiones por 249 € si quieres que te acompañe 90 días.
49€
30 min · Diagnóstico 1:1
99€
60 min · Revisión 1:1
149€
90 min · Estrategia 1:1
¿Prefieres que lo montemos por ti?
En NovaChat IA construimos agentes de voz, chatbots y automatizaciones para pymes. Tú lo usas, nosotros lo mantenemos.