bybit-exchange/svg-diagram

Что это?

Ключевые возможности

• 01Правила ручного размещения элементов SVG охватывают отступы viewBox, высоту блоков и геометрию соединителей.
• 02Инструмент svg-lint без зависимостей проверяет готовые SVG-файлы на соответствие единому стилю оформления.
• 03В замечаниях указаны найденное и ожидаемое значения и предлагается способ исправления.
• 04Отдельные таблицы ширины символов для латиницы и CJK позволяют проверять переполнение подписей.
• 05Пять троек семантических цветов задаются через атрибуты представления, без CSS-классов.

Сценарии использования

• Создание архитектурных диаграмм или диаграмм последовательностей с помощью coding-агента, чтобы их оформление было единообразным во всей документации.
• Встраивание диаграмм с китайскими подписями в документы Markdown без проблем с отсутствующими глифами.
• Проверка SVG-диаграмм через текстовые diff: все координаты заданы явными значениями.

Быстрый старт

1. 1

   Установите skill для своих агентов

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

   Запустите линтер для диаграммы (установка не требуется)

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

Что важно знать

• !Линтер — это инструмент для ручного использования мейнтейнерами; автоматически он не запускается.
• !Пользователи Claude.ai получают только текст skill, без линтера, которому нужен локальный Node.

Темы

Частые вопросы

Что такое svg-diagram?

Навык для AI-агентов и линтер без зависимостей, который помогает создавать SVG-диаграммы с вручную размещёнными элементами в едином стиле. svg-diagram — это навык для помощников по программированию, таких как Claude Code, Codex и opencode. Он задаёт правила расчёта расположения, цветовую систему и типографику, необходимые агенту для создания архитектурных диаграмм, блок-схем, диаграмм последовательностей, потоков данных и жизненного цикла в виде обычного SVG с явно заданным расположением элементов, а не с автоматической компоновкой.

svg-diagram можно использовать бесплатно? Какая у него лицензия?

svg-diagram распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

svg-diagram всё ещё поддерживается?

Обновлялся за последние 6 месяцев. Последний коммит в svg-diagram — 3 сент. 2026 г..

Для чего можно использовать svg-diagram?

Создание архитектурных диаграмм или диаграмм последовательностей с помощью coding-агента, чтобы их оформление было единообразным во всей документации. Встраивание диаграмм с китайскими подписями в документы Markdown без проблем с отсутствующими глифами. Проверка SVG-диаграмм через текстовые diff: все координаты заданы явными значениями.

Как установить svg-diagram?

Установите skill для своих агентов: npx skills add bybit-exchange/svg-diagram -g Запустите линтер для диаграммы (установка не требуется): node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

Где скачать svg-diagram?

Исходный код и инструкции по установке — на GitHub: https://github.com/bybit-exchange/svg-diagram