1
🧩 Qué es / qué hace
El skill excalidraw-diagram-generator convierte descripciones en lenguaje natural en archivos .excalidraw (JSON) que puedes abrir directamente en Excalidraw — sin ninguna configuración adicional.
💡 Concepto principal
Excalidraw es una herramienta de diagramación con estilo a mano alzada (hand-drawn look). La skill transforma texto en JSON estructurado compatible con el esquema de Excalidraw: elementos como rectángulos, elipses, diamantes, flechas y texto, cada uno con posición, tamaño, color y propiedades de estilo.
Tipos de diagramas compatibles
🔀 Diagramas de flujo
Flujos de proceso con nodos de decisión (rombo), inicio/fin (elipse) y etapas (rectángulo).
🕸️ Diagramas de relaciones
Entidades y sus conexiones; útil para modelar datos y mapear dependencias.
🧠 Mapas mentales
Diseño radial con un nodo central y ramas que se expanden en círculo, generados automáticamente.
🏗️ Arquitectura de sistemas
Componentes de sistema (servicios, bases de datos, APIs) con flechas que muestran el flujo de datos.
Conceptos clave
📄
.excalidraw
Formato JSON
✋
Dibujado a mano
Estilo visual
🗣️
Lenguaje natural
Entrada
🖱️
Cero configuración
Abre directamente
2
🎣 Cuándo se activa
Claude activa el excalidraw-diagram-generator cuando reconoce una de las frases desencadenantes enumeradas en la description de la skill.
🎯 Disparadores exactos (de la descripción del skill)
→ "crear un diagrama"
→ "make a flowchart"
→ "visualize a process"
→ "dibuja una arquitectura del sistema"
→ "crear un mapa mental"
→ "generate an Excalidraw file"
Línea de tiempo: del pedido al archivo
1
El usuario pide el diagrama en lenguaje natural
Ej.: "Crea un diagrama de flujo del proceso de deploy"
2
Skill activada — Claude elige el tipo de diagrama
Flowchart, relationship, mind map o system architecture
3
Generación del JSON con elementos y coordenadas
Cada elemento recibe x, y, width, height, strokeColor, backgroundColor, type
4
Archivo .excalidraw guardado e instrucciones entregadas
El usuario abre en excalidraw.com o en la aplicación local; no se necesita ninguna conversión
💡 Consejo: El skill acepta solicitudes en portugués. Basta con describir el proceso: Claude deduce las etapas, conexiones y jerarquía sin que tengas que enumerar cada elemento.
Conceptos clave
🔍
Detección automática
Tipo de diagrama
🗂️
Extracción
De entidades
📐
Diseño
Posicionamiento
💾
Archivo final
.excalidraw
3
🚀 Cómo mejora tus páginas
Los diagramas entregados ya editables eliminan el ciclo de «crear en Figma, exportar PNG, repetir con cada cambio».
✓ HACER con la skill
- ✓ Generar un diagrama de arquitectura de sistema desde la primera conversación
- ✓ Crear un flujo de onboarding para incluir en documentos o presentaciones
- ✓ Mapear dependencias entre módulos de código en un mapa mental
- ✓ Usar el archivo entregado como borrador editable en Excalidraw
✗ EVITAR
- ✗ Esperar una renderización perfecta a nivel de píxel: el estilo es intencionalmente "sketch"
- ✗ Pedir diagramas UML formales con notación estricta (usa Mermaid para eso)
- ✗ Generar más de ~40 nodos en una sola llamada: la calidad se degrada
- ✗ Usar como sustituto de herramientas vectoriales precisas (Illustrator, Figma)
📊 Valor concreto en el resultado final
Editable
Entrégalo como JSON; puedes mover, recolorear o eliminar cualquier elemento en Excalidraw sin tener que recrearlo todo.
Iterativo
Las solicitudes de ajuste («agrega un nodo de caché entre el servidor y la base de datos») generan un nuevo archivo en segundos.
Exportable
Excalidraw exporta a PNG/SVG con fondo transparente; encaja en cualquier doc o diapositiva.
Conceptos clave
🔄
Iteración rápida
Segundos/ajuste
🖊️
Editable
JSON abierto
📤
Exportar PNG/SVG
Para documentación
⏱️
Cero herramientas
extra
4
⚙️ Cómo funciona por dentro
Pipeline de 6 pasos definidos en SKILL.md: entender → elegir el tipo → extraer la estructura → generar JSON → dar formato a la salida → guardar e indicar los pasos.
📦 Stack técnico de la skill
excalidraw-schema.md
Esquema JSON completo de Excalidraw: tipos de elementos, propiedades obligatorias, valores válidos.
element-types.md
Especificaciones detalladas de rectangle, ellipse, diamond, arrow, line y text, con ejemplos JSON.
split-excalidraw-library.py
Script Python que descompone un
.excalidrawlib en íconos individuales para usar en diagramas con bibliotecas externas (AWS, Material, etc.).Plantillas iniciales
flowchart-template.json
Estructura base para diagramas de flujo: nodos conectados en secuencia lineal con soporte para ramificaciones.
relationship-template.json
Diseño de cuadrícula para diagramas de relaciones: entidades en una matriz con flechas bidireccionales.
mindmap-template.json
Diseño radial — nodo central con ramas que se expanden en arco, generado mediante el cálculo trigonométrico de ángulos.
⚙️ Detalle técnico: Los IDs de los elementos se generan automáticamente (cadenas aleatorias de 20 caracteres) para garantizar la unicidad dentro del JSON. Las flechas hacen referencia a los IDs de los nodos de origen y destino en los campos
startBinding e endBinding.
✓ Diagramas simples (recomendado)
- • Diagrama de flujo: 5–15 nodos
- • Mapa mental: 1 centro + hasta 8 ramas
- • Relación: hasta 10 entidades
- • Arquitectura: 6–12 componentes
✗ Evitar — reduce la calidad
- • Más de 40 elementos en una llamada
- • Diagramas con superposición densa
- • Etiquetas con más de 3–4 palabras
- • Jerarquías con más de 4 niveles
Conceptos clave
🗺️
Esquema JSON
Excalidraw
🔗
Bindings
Start/End IDs
🐍
split-library.py
Íconos externos
📐
Diseño radial
Trigonometría
5
💬 Ejemplo práctico + PROMPT listo
Tres escenarios reales: diagrama de flujo de proceso, arquitectura de sistema con íconos y mapa mental de estrategia.
📋 Escenario 1 — Diagrama de flujo del proceso de deploy
Quieres documentar visualmente el pipeline de CI/CD de tu equipo para el README.
Crea un diagrama de flujo de nuestro proceso de deploy:
1. El developer hace push en el branch
2. CI ejecuta las pruebas (si falla → notifica a Slack y termina)
3. Build de la imagen Docker
4. Deploy en staging
5. Smoke tests (si fallan → rollback automático)
6. Aprobación manual del tech lead
7. Deploy en producción
8. Monitoreo durante 10 minutos
Guárdalo como deploy-flow.excalidraw
🏗️ Escenario 2 — Arquitectura de microservicios
Diagrama de arquitectura para una presentación técnica al equipo.
Draw a system architecture diagram with these components:
- React frontend (browser)
- API Gateway
- Auth Service (JWT)
- Product Service
- Order Service
- PostgreSQL (shared)
- Redis cache (between API Gateway and services)
- Notification Service (async via message queue)
Show data flow arrows. Output: microservices-arch.excalidraw
🧠 Escenario 3 — Mapa mental del producto
Create a mind map for "Lanzamiento de producto":
Centro: Lanzamiento Q3
Ramas principales: Marketing, Producto, Ing, Datos, Soporte
- Marketing → campaña de email, anuncios en redes sociales, landing page
- Producto → feature flags, onboarding, changelog
- Ing → deploy gradual, monitoreo, plan de rollback
- Datos → métricas de activación, embudo, cohorts
- Soporte → preguntas frecuentes, capacitación, escalamiento
Guárdalo como: lancamento-q3.excalidraw
🎯 Resultado esperado: Un archivo
.excalidraw con todos los elementos posicionados. Ábrelo en excalidraw.com o en la app de escritorio; no hace falta instalar nada más. Ajusta los colores y las posiciones libremente después de la generación.
Conceptos clave
🔀
Flowchart
Proceso lineal
🏗️
Arquitectura del sistema
Componentes
🧠
Mapa mental
Radial
📎
Nombra el archivo
En el prompt
6
🧬 Combina con / límites — y el contraste con beautiful-mermaid
Excalidraw y beautiful-mermaid son complementarios: uno para bocetos visuales y el otro para diagramas técnicos precisos.
🔬 Excalidraw vs beautiful-mermaid — ¿cuál usar y cuándo?
✏️ Excalidraw
- • Estilo manos libres — aspecto desenfadado, ideal para presentaciones y wireframes
- • Archivo editable — abres y ajustas cada elemento en el canvas
- • Sin notación formal: libertad total de diseño
- • Ideal para: onboarding, documentación técnica informal, lluvia de ideas visual
📊 beautiful-mermaid
- • Estilo técnico limpio — renderizado preciso basado en texto con Mermaid
- • Código como fuente — diagramas versionables en Git
- • Notación formal: Sequence, Class, Gantt, ER, C4, Git graph
- • Ideal para: PRs, READMEs técnicos, documentación de API, informes
Regla práctica: si el diagrama va a un deck o presentación → Excalidraw. Si va al README o PR → beautiful-mermaid.
Combina con estos skills del curso
📊 beautiful-mermaid(T4 • 4.1)
Usa Excalidraw para el borrador inicial y luego conviértelo a Mermaid cuando necesites un diagrama preciso y versionable en el repo.
🔭 website-intelligence(T4 • 4.4)
Extrae la estructura de un sitio con website-intelligence y luego visualiza la arquitectura de información en un diagrama de Excalidraw.
🧱 web-artifacts-builder(T1 • 1.3)
Mapea la arquitectura de componentes con Excalidraw antes de construir con web-artifacts-builder: el diagrama se convierte en una especificación visual.
🕹️ agent-browser(T4 • 4.3)
Automatiza la apertura y la captura de pantalla del archivo .excalidraw en el navegador con agent-browser para integrar el diagrama en pipelines de documentación.
⚠️ Límites de la skill
- • No admite diagramas UML formales (usa Mermaid classDiagram o sequenceDiagram)
- • Los íconos de bibliotecas externas (AWS, Material) requieren configuración manual con
split-excalidraw-library.py - • El posicionamiento de los nodos es aproximado: los diseños muy complejos pueden necesitar ajustes manuales
- • No sustituye las herramientas vectoriales para el diseño preciso de UI
Conceptos clave
✏️
Manos libres
vs técnico
🔗
Complementario
con Mermaid
🚫
Sin UML formal
Limitación
🏆
Presentaciones
Caso ideal
✅ Resumen del Módulo 4.2
✓ El skill excalidraw-diagram-generator genera archivos
.excalidraw a partir de descripciones en lenguaje natural✓ Admite diagramas de flujo, diagramas de relaciones, mapas mentales y arquitectura de sistemas
✓ El resultado es JSON puro compatible con Excalidraw: sin conversión, se abre directamente
✓ Internamente usa un schema JSON + templates (flowchart, relationship, mindmap)
✓ Íconos externos (AWS, Material) vía
split-excalidraw-library.py con configuración manual✓ Complementario a beautiful-mermaid: estilo a mano alzada para presentaciones frente a estilo técnico para repos
✓ Complejidad ideal: 5–15 nodos; evita más de 40 elementos por llamada
✓ Combina con website-intelligence, web-artifacts-builder y agent-browser
Próximo módulo
🕹️
4.3 — agent-browser
Automatización del navegador con Playwright: navegación, capturas de pantalla, extracción de datos y pruebas web directamente desde Claude Code.