bybit-exchange/svg-diagram

O que é?

Recursos principais

• 01Regras para posicionar manualmente elementos SVG, incluindo margens do viewBox, altura das caixas e geometria dos conectores.
• 02A ferramenta svg-lint, sem dependências, verifica se arquivos SVG finalizados seguem o estilo visual definido.
• 03Os apontamentos informam o valor encontrado e o esperado, além de sugerirem uma correção.
• 04Tabelas separadas de largura de caracteres para caracteres latinos e CJK, usadas para verificar se os rótulos excedem os limites.
• 05Cinco conjuntos de cores semânticas aplicados por meio de atributos de apresentação, sem classes CSS.

Casos de uso

• Pedir a um agente de programação que produza diagramas de arquitetura ou sequência com estilo consistente em toda a documentação.
• Incorporar diagramas com rótulos em chinês em documentos Markdown sem problemas de caracteres ausentes.
• Revisar diagramas SVG por meio de diffs de texto, já que cada coordenada é um valor literal.

Início rápido

1. 1

   Instale a skill para seus agentes

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

   Execute o linter em um diagrama (não precisa instalar)

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

Antes de usar

• !O linter é uma ferramenta manual para mantenedores; nada o executa automaticamente.
• !Usuários do Claude.ai recebem apenas o texto da skill, sem o linter, que precisa do Node local.

Tópicos

Perguntas frequentes

O que é svg-diagram?

Uma skill para agentes e um linter sem dependências que ensinam agentes de programação a criar diagramas SVG com posicionamento manual e um estilo visual consistente. svg-diagram é uma skill para assistentes de programação, como Claude Code, Codex e opencode. Ela fornece ao agente as regras de cálculo de layout, cores e tipografia necessárias para desenhar diagramas de arquitetura, fluxogramas, sequências, fluxo de dados e ciclo de vida em SVG puro, com elementos posicionados explicitamente em vez de gerados por um sistema de layout automático.

svg-diagram é gratuito? Qual é a licença?

svg-diagram é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

svg-diagram ainda é mantido?

Atualizado nos últimos 6 meses. O último commit de svg-diagram foi em 3 de set. de 2026.

Para que posso usar svg-diagram?

Pedir a um agente de programação que produza diagramas de arquitetura ou sequência com estilo consistente em toda a documentação. Incorporar diagramas com rótulos em chinês em documentos Markdown sem problemas de caracteres ausentes. Revisar diagramas SVG por meio de diffs de texto, já que cada coordenada é um valor literal.

Como instalar svg-diagram?

Instale a skill para seus agentes: npx skills add bybit-exchange/svg-diagram -g Execute o linter em um diagrama (não precisa instalar): node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

Onde consigo svg-diagram?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/bybit-exchange/svg-diagram