Repolode
Enviar
coleam00

coleam00/excalidraw-diagram-skill

Una skill para agentes de programación que permite a Claude Code y agentes similares generar diagramas de Excalidraw a partir de descripciones en lenguaje natural.

Alternativa open source a:Lucidchart

Ver en GitHub
Estrellas
5,043
Forks
584
Issues abiertos
34
Último commit
hace 8 meses

¿Qué es?

Esta skill permite a agentes de programación como Claude Code y OpenCode crear diagramas de Excalidraw a partir de descripciones en lenguaje natural. El agente se encarga de traducir los conceptos en elementos visuales, diseñar la distribución, generar el JSON y renderizarlo. Así, el usuario puede pedir un diagrama de un sistema o protocolo y recibir un archivo de Excalidraw editable.

El proyecto se centra en la estructura del diagrama, no solo en crear cajas y flechas. Las formas se organizan para representar el concepto, por ejemplo, con ramificaciones para relaciones de uno a muchos, líneas de tiempo para secuencias y elementos que convergen para mostrar una agregación. Los diagramas técnicos pueden incluir fragmentos de código y ejemplos de payloads JSON.

Un flujo de renderizado basado en Playwright permite que el agente vea su propio resultado, compruebe si hay texto superpuesto o flechas desalineadas y haga ajustes antes de entregarlo. Los colores y estilos de marca se definen en un único archivo de paleta que se puede reemplazar.

Funciones clave

  • 01Genera diagramas de Excalidraw a partir de descripciones en lenguaje natural.
  • 02Organiza las formas para representar el concepto, con ramificaciones, líneas de tiempo y convergencias, por ejemplo.
  • 03Renderiza el resultado con Playwright para que el agente pueda detectar y corregir problemas de distribución.
  • 04Incluye fragmentos de código y ejemplos de payloads JSON en los diagramas técnicos.
  • 05Centraliza los colores de marca en un único archivo de paleta para facilitar la personalización.

Casos de uso

  • Documentar la arquitectura de un sistema o un flujo de datos durante una sesión con un agente de programación.
  • Ilustrar la secuencia de una API o un protocolo para un documento de diseño.
  • Crear diagramas acordes con la marca modificando el archivo de paleta de colores.

Inicio rápido

  1. 1

    Clona el repositorio

    git clone https://github.com/coleam00/excalidraw-diagram-skill.git
  2. 2

    Copia la skill en el directorio skills de tu proyecto

    cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
  3. 3

    Instala las dependencias del renderizador y Chromium

    cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium
  4. 4

    Pide a tu agente de programación que cree un diagrama

Antes de usarlo

  • El README no indica ninguna licencia, por lo que los derechos de uso no están claros.
  • La canalización de renderizado requiere uv y Playwright con Chromium instalado.

Temas

#excalidraw#diagrams#claude-code#agent-skills#playwright#visualization

Preguntas frecuentes

¿Qué es excalidraw-diagram-skill?
Una skill para agentes de programación que permite a Claude Code y agentes similares generar diagramas de Excalidraw a partir de descripciones en lenguaje natural. Esta skill permite a agentes de programación como Claude Code y OpenCode crear diagramas de Excalidraw a partir de descripciones en lenguaje natural. El agente se encarga de traducir los conceptos en elementos visuales, diseñar la distribución, generar el JSON y renderizarlo. Así, el usuario puede pedir un diagrama de un sistema o protocolo y recibir un archivo de Excalidraw editable.
¿excalidraw-diagram-skill es gratuito? ¿Qué licencia tiene?
excalidraw-diagram-skill no declara ninguna licencia. Su código es público, pero sin licencia no tienes permiso explícito para reutilizarlo; consulta al autor antes de depender de él.
¿excalidraw-diagram-skill sigue mantenido?
Sin commits en más de 6 meses. El último commit de excalidraw-diagram-skill fue el 1 mar 2026.
¿Para qué puedo usar excalidraw-diagram-skill?
Documentar la arquitectura de un sistema o un flujo de datos durante una sesión con un agente de programación. Ilustrar la secuencia de una API o un protocolo para un documento de diseño. Crear diagramas acordes con la marca modificando el archivo de paleta de colores.
¿Cómo se instala excalidraw-diagram-skill?
Clona el repositorio: git clone https://github.com/coleam00/excalidraw-diagram-skill.git Copia la skill en el directorio skills de tu proyecto: cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram Instala las dependencias del renderizador y Chromium: cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium Pide a tu agente de programación que cree un diagrama
¿Dónde consigo excalidraw-diagram-skill?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/coleam00/excalidraw-diagram-skill

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados