Repolode
Enviar
bybit-exchange

bybit-exchange/svg-diagram

Una skill para agentes y un linter sin dependencias que hace que los agentes de programación dibujen diagramas SVG con elementos colocados manualmente y un estilo uniforme.

Ver en GitHub
Estrellas
629
Forks
45
Issues abiertos
2
Último commit
hace 2 meses

¿Qué es?

svg-diagram es una skill para asistentes de programación como Claude Code, Codex y opencode. Proporciona al agente las reglas de cálculo de la disposición, el sistema de colores y las pautas tipográficas necesarias para dibujar diagramas de arquitectura, flujo, secuencia, flujo de datos y ciclo de vida como SVG sin procesar, con elementos colocados explícitamente en lugar de distribuidos automáticamente.

El proyecto también incluye svg-lint, una herramienta de Node sin dependencias que comprueba si un SVG terminado cumple el estilo establecido. Realiza 12 comprobaciones que abarcan el escape de XML, los márgenes del viewBox, la pila de fuentes, la altura de los cuadros, los marcadores de punta de flecha, el desbordamiento de texto, las superposiciones y la conformidad con la paleta. Cada resultado indica el valor encontrado y el esperado.

La skill incluye tablas de ancho de caracteres compatibles con CJK y una pila de fuentes que evita que las etiquetas en chino se muestren como glifos faltantes. La instalación se hace con npx skills add y copia la skill al directorio de cada agente compatible.

Funciones clave

  • 01Reglas para colocar manualmente elementos SVG que abarcan los márgenes del viewBox, la altura de los cuadros y la geometría de los conectores.
  • 02Una herramienta svg-lint sin dependencias que comprueba si los archivos SVG terminados cumplen el estilo establecido.
  • 03Los resultados indican el valor encontrado y el esperado, junto con una sugerencia para corregirlo.
  • 04Tablas separadas de ancho de caracteres para caracteres latinos y CJK, que permiten comprobar el desbordamiento de las etiquetas.
  • 05Cinco tríadas de colores semánticos aplicadas mediante atributos de presentación, sin clases CSS.

Casos de uso

  • Hacer que un agente de programación genere diagramas de arquitectura o de secuencia con un estilo uniforme en toda la documentación.
  • Incluir en documentos Markdown diagramas con etiquetas en chino sin problemas de glifos faltantes.
  • Revisar diagramas SVG mediante diferencias de texto, ya que cada coordenada es un valor literal.

Inicio rápido

  1. 1

    Instala la skill para tus agentes

    npx skills add bybit-exchange/svg-diagram -g
  2. 2

    Ejecuta el linter en un diagrama (no requiere instalación)

    node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

Antes de usarlo

  • El linter es una herramienta manual para mantenedores; no se ejecuta automáticamente.
  • Los usuarios de Claude.ai solo reciben el texto de la skill, sin el linter, que requiere Node en local.

Temas

#svg#diagrams#agent-skills#documentation#linter#cjk#claude-code#system-design#architecture-diagram#claude-skill

Preguntas frecuentes

¿Qué es svg-diagram?
Una skill para agentes y un linter sin dependencias que hace que los agentes de programación dibujen diagramas SVG con elementos colocados manualmente y un estilo uniforme. svg-diagram es una skill para asistentes de programación como Claude Code, Codex y opencode. Proporciona al agente las reglas de cálculo de la disposición, el sistema de colores y las pautas tipográficas necesarias para dibujar diagramas de arquitectura, flujo, secuencia, flujo de datos y ciclo de vida como SVG sin procesar, con elementos colocados explícitamente en lugar de distribuidos automáticamente.
¿svg-diagram es gratuito? ¿Qué licencia tiene?
svg-diagram es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿svg-diagram sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de svg-diagram fue el 3 sept 2026.
¿Para qué puedo usar svg-diagram?
Hacer que un agente de programación genere diagramas de arquitectura o de secuencia con un estilo uniforme en toda la documentación. Incluir en documentos Markdown diagramas con etiquetas en chino sin problemas de glifos faltantes. Revisar diagramas SVG mediante diferencias de texto, ya que cada coordenada es un valor literal.
¿Cómo se instala svg-diagram?
Instala la skill para tus agentes: npx skills add bybit-exchange/svg-diagram -g Ejecuta el linter en un diagrama (no requiere instalación): node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg
¿Dónde consigo svg-diagram?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/bybit-exchange/svg-diagram

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

Proyectos relacionados