Repolode
Enviar
Aryanutkarsh

Aryanutkarsh/SeeCode

Una skill de agente que convierte una breve especificación JSON en diagramas animados e interactivos, exportables como HTML, SVG, PNG, GIF o MP4.

Alternativa open source a:LucidchartMiro

Ver en GitHub
Estrellas
656
Forks
35
Issues abiertos
0
Último commit
anteayer

¿Qué es?

SeeCode es una skill para Claude Code y otros agentes de programación. Describes el sistema o proceso que quieres mostrar y el agente escribe una breve especificación JSON que SeeCode convierte en un diagrama HTML independiente. El visor permite resaltar conexiones al pasar el cursor, abrir paneles de detalles al hacer clic, reproducir rutas entre dos nodos, filtrar capas y avanzar paso a paso en una presentación.

El proyecto abarca unos 45 tipos de diagramas, incluidos diagramas de arquitectura, secuencia, flujo, entidad-relación, estados, Gantt, kanban, clases UML y Sankey, además de varios dibujos isométricos. Los gráficos pueden obtener sus valores de archivos CSV o JSON. También permite volver a dibujar con el estilo de SeeCode diagramas existentes de Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw, BPMN, SQL, Prisma, DBML y OpenAPI. Puede extraer los colores y las fuentes de marca de un sitio web o de tokens de diseño, e incluye temas claros y oscuros.

Se puede exportar a SVG, PNG, JPEG, GIF y MP4. El menú de exportación del navegador no requiere instalar nada. La herramienta de línea de comandos requiere Node 20 o posterior y utiliza una instalación local de Chrome o Edge para los formatos rasterizados y de video.

Funciones clave

  • 01Genera diagramas HTML animados e interactivos a partir de una breve especificación JSON
  • 02Admite unos 45 tipos de diagramas, desde diagramas de arquitectura y secuencia hasta gráficos y dibujos isométricos
  • 03Importa Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw y otros formatos para volver a dibujarlos
  • 04Extrae los colores y las fuentes de marca de un sitio web o de tokens de diseño, e incluye temas claros y oscuros
  • 05Exporta a SVG, PNG, JPEG, GIF y MP4

Casos de uso

  • Explicar la arquitectura de un servicio o el flujo de una solicitud al equipo mientras trabajas con un agente de programación
  • Convertir un diagrama existente de Mermaid o draw.io en una versión más pulida para una presentación o un documento de diseño
  • Crear diagramas para diapositivas, Confluence o un README con un estilo de marca coherente
  • Crear gráficos a partir de datos CSV sin pasar los datos sin procesar por el modelo

Temas

#diagrams#agent-skills#claude-code#architecture-diagram#data-visualization#svg#mermaid#ai-agents#claude-skills#codex

Preguntas frecuentes

¿Qué es SeeCode?
Una skill de agente que convierte una breve especificación JSON en diagramas animados e interactivos, exportables como HTML, SVG, PNG, GIF o MP4. SeeCode es una skill para Claude Code y otros agentes de programación. Describes el sistema o proceso que quieres mostrar y el agente escribe una breve especificación JSON que SeeCode convierte en un diagrama HTML independiente. El visor permite resaltar conexiones al pasar el cursor, abrir paneles de detalles al hacer clic, reproducir rutas entre dos nodos, filtrar capas y avanzar paso a paso en una presentación.
¿SeeCode es gratuito? ¿Qué licencia tiene?
SeeCode es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿SeeCode sigue mantenido?
Mantenimiento activo. El último commit de SeeCode fue el 17 oct 2026.
¿Para qué puedo usar SeeCode?
Explicar la arquitectura de un servicio o el flujo de una solicitud al equipo mientras trabajas con un agente de programación Convertir un diagrama existente de Mermaid o draw.io en una versión más pulida para una presentación o un documento de diseño Crear diagramas para diapositivas, Confluence o un README con un estilo de marca coherente Crear gráficos a partir de datos CSV sin pasar los datos sin procesar por el modelo
¿Dónde consigo SeeCode?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Aryanutkarsh/SeeCode

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

Proyectos relacionados