svg-diagram — скилл
Скилл рисует архитектурные схемы, блок-схемы и диаграммы последовательностей как размеченный вручную SVG в едином стиле
- 671 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл это инструкции и локальный линтер, который только читает SVG
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/svg-diagramОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл это инструкции и локальный линтер, который только читает SVG
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл задает агенту единый стиль рисования диаграмм прямо в SVG: арифметику раскладки, систему цветов и типографику, дружелюбную к иероглифам. Агент рассчитывает высоту блоков, отступы, зазоры у стрелок и положение подписей так, чтобы элементы не накладывались и текст не резался рамкой. В комплекте линтер svg-lint без зависимостей, который читает готовый SVG и проверяет его по двенадцати правилам: экранирование, поля viewBox, шрифтовой стек, геометрия связей и другие. Каждая находка называет проблему и точное исправление.
Для кого. Для разработчиков и техписателей, которым нужны аккуратные схемы в документации и README.
Подходит, если
- Нужна архитектурная схема или блок-схема в документации
- Нужна диаграмма последовательности или потока данных в SVG
- Нужен единый стиль схем, проверяемый линтером
Не подходит, если
- Достаточно текстовой схемы вроде Mermaid, без ручной раскладки SVG
- Нужна интерактивная диаграмма с логикой, а не статичный SVG
Пример запроса к агенту
Нарисуй архитектурную схему сервиса в SVG по стилю svg-diagram и проверь ее линтеромОграничения
Линтер svg-lint это ручной инструмент, он ничего не запускает автоматически, его нужно вызывать перед сдачей схемы. Диаграмма несет один набор цветов и рисует белую подложку, чтобы читаться на темной теме, это не переключение тем. Для запуска линтера нужен Node, зависимостей у него нет.
Как отключить. Удалите каталог svg-diagram из папки скиллов агента.
Частые вопросы
Что проверяет линтер?
Двенадцать правил: экранирование XML, обрезку по viewBox, шрифтовой стек, высоту блоков, смещение базовой линии, зазоры, маркеры стрелок, переполнение текста, наложения, подложку, соответствие палитре и геометрию связей. Проходом считается только ноль ошибок и ноль предупреждений.
Нужен ли линтер, чтобы пользоваться скиллом?
Нет, текст скилла работает и без него, но линтер это доказательство, что схема выполнена по правилам стиля.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыFireworks Tech Graph
fireworks-tech-graph
Скилл строит технические SVG-диаграммы по текстовому описанию: архитектура, UML, схемы агентов, облачные схемы, с экспортом в PNG и GIF
Скилл рисует архитектуру системы одной HTML-страницей: схема с панорамой, фокусом на узле, светлой и темной темой.
Скилл, который вместо ASCII-схем в терминале собирает самодостаточные HTML-страницы: диаграммы, разбор диффов, ревью планов, таблицы и слайды
stack-diagram, скилл для архитектурных схем, встраивает логотипы и шрифты в HTML: готовый файл можно открыть без сети.
Скилл строит интерактивные диаграммы по коду: одиннадцать типов, ссылки на строки-источники и один офлайн-файл HTML.
Скилл и CLI рисуют схемы архитектуры по Prisma, OpenAPI, GraphQL и коду, а документацию проверяют в CI на расхождение с кодом
Коротко о README
README описывает единый стиль ручных SVG-схем: арифметика раскладки, цвета, типографика и линтер без зависимостей. Показана галерея из десяти диаграмм, каждая иллюстрирует конкретное правило. Установка идет через skills CLI, есть путь только с текстом скилла без линтера. Линтер svg-lint читает готовый SVG и сообщает нарушения с точным исправлением. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: svg-diagram description: SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context. --- # SVG Diagramming Conventions ## Output location and referencing > Diagrams go in SVG, never ASCII art. That rule decides *whether* to draw; this skill covers *how*, starting with where the file lands. - Put the file in an `assets/` directory next to the document (e.g. `docs/foo.md` -> `docs/assets/foo-arch.svg`) - Reference it from markdown with a relative path, ``. Do not inline SVG XML.