excalidraw-diagram-generatorpor GitHub

Excalidraw Diagram Generator Skill.

Una skill de Claude Code y Codex para diagramas y gráficos: genera diagramas y mapas mentales de Excalidraw desde lenguaje natural.

Diagrams & Data Visualization
Diagram

Descargar OpenDesign Ver guía de uso

github/awesome-copilot · skills/excalidraw-diagram-generator/SKILL.mdSKILL.md

--- name: excalidraw-diagram-generator description: Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw. --- ## When to Use This Skill ## Prerequisites ## Step-by-Step Workflow ## Best Practices ## Example Prompts and Responses ## Advanced Techniques

Metadatos iniciales y encabezados de sección leídos del archivo original el 14/09/2026 · 24 276 caracteres en total

01 Qué hace

Qué hace el skill excalidraw-diagram-generator en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Genera diagramas en formato Excalidraw a partir de descripciones en lenguaje natural. Admite nueve tipos de diagramas: diagramas de flujo para procesos secuenciales, diagramas de relaciones para conexiones entre entidades, mapas mentales para jerarquías de conceptos, diagramas de arquitectura para el diseño de sistemas, diagramas de flujo de datos para procesos de transformación de datos, diagramas de carriles de flujo de negocio para flujos de trabajo interfuncionales, diagramas de clases para diseño orientado a objetos, diagramas de secuencia para interacciones entre objetos a lo largo del tiempo, y diagramas ER para relaciones de entidades de bases de datos.

Genera archivos JSON en formato .excalidraw con los elementos adecuados (rectángulos, elipses, rombos, flechas, texto) posicionados mediante coordenadas calculadas y con estilos de esquemas de color consistentes. Los archivos se abren directamente en Excalidraw en excalidraw.com o mediante la extensión de VS Code.

Qué produce

Archivo JSON .excalidraw completo con un nombre de archivo descriptivo
Resumen de lo creado, incluyendo el tipo de diagrama y el recuento de elementos
Instrucciones para abrir y editar el diagrama en Excalidraw

Ver el ejemplo de prompt ↗

Cómo funciona

01
Entender la solicitud
Analiza la descripción del usuario para determinar el tipo de diagrama (diagrama de flujo, relación, mapa mental, arquitectura), los elementos clave (entidades, pasos, conceptos), las relaciones (flujo, conexiones, jerarquía) y la complejidad (número de elementos).
02
Elegir el tipo de diagrama adecuado
Hace coincidir la intención del usuario con el tipo de diagrama reconociendo palabras clave.
03
Extraer información estructurada
Enumera los elementos según el tipo de diagrama. Para diagramas de flujo: pasos secuenciales, puntos de decisión, punto de inicio y de fin.
04
Generar el JSON de Excalidraw
Crea el archivo .excalidraw con los tipos de elemento adecuados (rectángulo, elipse, rombo, flecha, texto) y establece propiedades clave como la posición (coordenadas x, y), el tamaño (width, height), el estilo (strokeColor, backgroundColor, fillStyle), la fuente (fontFamily: 5 para Excalifont) y las conexiones (points array para las flechas).
05
Dar formato a la salida
Estructura el archivo Excalidraw completo con type, version, source, elements array, appState (viewBackgroundColor, gridSize) y files object.
06
Guardar y proporcionar instrucciones
Guarda el archivo como descriptive-name.excalidraw e informa al usuario cómo abrirlo: visitando excalidraw.com, haciendo clic en Open o arrastrando y soltando el archivo, o usando la extensión de Excalidraw para VS Code.

02 Encuentra tu caso de uso

Cuándo usar el skill excalidraw-diagram-generator

Usar el skill excalidraw-diagram-generator en Claude Code o Codex cuando el trabajo sea diagramas y gráficos de este tipo. La adecuación y límites a continuación provienen del propio archivo del skill.

Buen caso de uso

Procesos secuenciales, flujos de trabajo y árboles de decisión mediante diagramas de flujo
Relaciones entre entidades, componentes del sistema y dependencias mediante diagramas de relación
Jerarquías de conceptos, resultados de lluvias de ideas y organización de temas mediante mapas mentales
Diseño de sistemas, interacciones entre módulos y flujo de datos mediante diagramas de arquitectura
Flujos de trabajo interfuncionales y flujos de proceso basados en actores mediante diagramas de carriles de flujo de negocio

Conozca los límites

Curvas complejas, que se simplifican a líneas rectas o curvas básicas
Las imágenes incrustadas no son compatibles con la generación automática
Diagramas con más de 20 elementos, ya que el máximo recomendado es de 20 por diagrama
Detección automática de colisiones, ya que el skill usa pautas de espaciado en su lugar

Qué proporcionar

Descripción clara de lo que debe visualizarseDescripción en lenguaje natural del proceso, sistema, relaciones o conceptos que se van a diagramar
Identificación de entidades, pasos o conceptos claveLos componentes principales que se convertirán en elementos del diagrama
Comprensión de las relaciones o el flujo entre elementosCómo se conectan las entidades, la secuencia de pasos o la estructura jerárquica

03 Dentro del skill

Reglas que el skill excalidraw-diagram-generator da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Límites de cantidad de elementos
Pasos de diagrama de flujo: 3-10 recomendados, 15 como máximo. Entidades de relación: 3-8 recomendadas, 12 como máximo. Ramas de mapa mental: 4-6 recomendadas, 8 como máximo.
Familia de fuente obligatoria
Todos los elementos de texto deben usar fontFamily: 5 (Excalifont) para una apariencia visual consistente. Esto es obligatorio en la lista de validación.
Directrices de espaciado
Espacio horizontal entre elementos: 200-300px. Espacio vertical entre filas: 100-150px. Tamaño de texto: 16-24px para legibilidad.
Consistencia del esquema de color
Los elementos primarios usan azul claro (#a5d8ff), los secundarios usan verde claro (#b2f2bb), los elementos importantes/centrales usan amarillo (#ffd43b) y las alertas/advertencias usan rojo claro (#ffc9c9).
Gestión de la complejidad
Si la solicitud del usuario tiene demasiados elementos, sugiera dividirla en varios diagramas, priorice los elementos principales y ofrezca crear subdiagramas detallados.
Dirección del flujo de datos
En los diagramas de flujo de datos, no represente el orden del proceso, solo el flujo de datos. Los flujos de datos deben mostrarse de izquierda a derecha o de arriba a la izquierda hacia abajo a la derecha.
Máximo de cantidad de elementos
La cantidad de elementos debe ser razonable, con menos de 20 elementos para mayor claridad. Esto se comprueba en la lista de validación antes de la entrega.
IDs únicos y sin superposición
Todos los elementos deben tener IDs únicos y las coordenadas deben evitar superposiciones. Estas son comprobaciones de validación obligatorias antes de entregar el diagrama.

04 Ponlo a trabajar

Instalar excalidraw-diagram-generator en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir excalidraw-diagram-generator a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

Forma genérica de la CLI skills para skills/excalidraw-diagram-generator/SKILL.md; el repositorio puede documentar su propia ruta.

Asignar al Skill una Primera Tarea de Diagramas y Gráficos

Adapta esta instrucción con tu propio contenido y restricciones, luego ejecútala en Claude Code o Codex.

Example prompt

Create a flowchart for user registration

Fuente: ejemplo de SKILL.md (textual).

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Verifique que todos los elementos tengan IDs únicos
Compruebe que el texto sea legible con un tamaño de fuente de 16 o superior
Verifique que todos los elementos de texto usen fontFamily: 5 (Excalifont)
Confirme que las flechas conecten de forma lógica y que los colores sigan un esquema consistente

En OpenDesign importe excalidraw-diagram-generator desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: GitHub
Repository: github.com/github/awesome-copilot Rama main
Archivo de skill: skills/excalidraw-diagram-generator/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 1899b18
License: MIT De LICENSE.
Estrellas del repositorio: 38,981 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio github/awesome-copilot, que contiene 6 skills en este catálogo. No es una calificación ni un recuento de uso para excalidraw-diagram-generator.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo usar este skillEnumera frases desencadenantes y tipos de diagramas admitidos, incluidos diagramas de flujo, relaciones, mapas mentales, arquitectura, DFD, swimlane, clases, secuencia y ER
Requisitos previosRequiere una descripción clara, la identificación de las entidades o pasos clave, y la comprensión de las relaciones o el flujo
Flujo de trabajo paso a pasoProceso de seis pasos que va desde la comprensión de la solicitud hasta la elección del tipo de diagrama, la extracción de información, la generación de JSON, el formateo de la salida y el guardado con instrucciones
Buenas prácticasPautas sobre el número de elementos, consejos de diseño para el espaciado y la posición, esquemas de color, tamaño de texto y estrategias de gestión de la complejidad
Ejemplos de prompts y respuestasTres ejemplos que muestran un diagrama de flujo de registro de usuario, relaciones usuario-publicación-comentario y un mapa mental de aprendizaje automático con los pasos de extracción
Solución de problemasSoluciones para elementos superpuestos, problemas de ajuste de texto, exceso de elementos, diseño poco claro y colores inconsistentes
Técnicas avanzadasFórmula de disposición en cuadrícula para diagramas de relaciones, disposición radial para mapas mentales y patrón de ID generado automáticamente usando marca de tiempo y cadena aleatoria
Formato de salidaSiempre proporciona el archivo JSON .excalidraw completo, un resumen con el número de elementos e instrucciones para abrirlo en excalidraw.com o VS Code
Lista de validaciónOcho comprobaciones antes de la entrega, incluidos los ID únicos, la ausencia de coordenadas superpuestas, texto legible, la familia tipográfica Excalifont, flechas lógicas, colores consistentes, JSON válido y una cantidad razonable de elementos
Bibliotecas de iconos (mejora opcional)Flujo de trabajo con script de Python para añadir iconos de servicios en la nube desde las bibliotecas de Excalidraw, incluidas las instrucciones de configuración y el uso de add-icon-to-diagram.py y add-arrow.py
ReferenciasDocumentación del esquema incluida, especificaciones de tipos de elementos, ocho plantillas de diagramas, tres scripts de Python para la integración de iconos y flechas, y el README del script
LimitacionesCurvas simplificadas, sin imágenes incrustadas, se recomienda un máximo de 20 elementos, sin detección automática de colisiones

La descripción propia del Skill

"Genera diagramas de Excalidraw a partir de descripciones en lenguaje natural. Úsala cuando te pidan "crear un diagrama", "hacer un diagrama de flujo", "visualizar un proceso", "dibujar una arquitectura de sistema", "crear un mapa mental" o "generar un archivo Excalidraw". Admite diagramas de flujo, diagramas de relaciones, mapas mentales y diagramas de arquitectura de sistemas. Produce archivos JSON .excalidraw que se pueden abrir directamente en Excalidraw."

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 24 276 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill excalidraw-diagram-generator

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Cómo abro el archivo de diagrama generado?

Visita excalidraw.com y haz clic en Open o arrastra y suelta el archivo .excalidraw. Alternativamente, puedes usar la extensión de Excalidraw para VS Code para abrirlo directamente en tu editor.

¿Puedo usar iconos de AWS o de servicios en la nube en mis diagramas?

Sí, el skill admite bibliotecas de iconos de excalidraw.com/libraries. Descargas un archivo .excalidrawlib, ejecutas el script split-excalidraw-library.py para dividirlo en iconos individuales y luego usas los scripts de Python add-icon-to-diagram.py y add-arrow.py para añadir iconos y conexiones a tu diagrama.

Este enfoque evita el consumo de tokens y proporciona transformaciones de coordenadas precisas con generación automática de UUID.

Excalidraw Diagram Generator

Ejecute excalidraw-diagram-generator en una tarea real de diagramas y gráficos.

Descarga OpenDesign, importa excalidraw-diagram-generator desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

Qué hace el skill excalidraw-diagram-generator en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo usar el skill excalidraw-diagram-generator

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el skill excalidraw-diagram-generator da a Claude Code y Codex

Límites de cantidad de elementos

Familia de fuente obligatoria

Directrices de espaciado

Consistencia del esquema de color

Gestión de la complejidad

Dirección del flujo de datos

Máximo de cantidad de elementos

IDs únicos y sin superposición