diagram-design-editorial — скилл для Claude Code: 13 типов диаграмм
Скилл собирает диаграммы в HTML и SVG для статей и документации: 13 типов, без Mermaid и сборки, стиль подгоняется под ваш сайт.
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a claude-codeЧто делает diagram-design-editorial
Скилл описывает 13 типов диаграмм: архитектура, блок-схема, sequence, конечный автомат, ER-модель, таймлайн, swimlane, квадрант, вложенность, дерево, стопка слоёв, диаграмма Венна и пирамида с воронкой. Вы просто говорите, что нужно нарисовать, а Claude выбирает подходящий тип, пишет HTML и сохраняет файл. Готовые заготовки лежат в assets/template.html и assets/template-full.html — вторую можно скопировать, если нужны карточки с выводами.
Диаграммы самодостаточные: HTML плюс SVG, без сборки и внешних библиотек. Внутри есть правила сетки — все координаты, ширины и отступы кратны 4px, тени запрещены, радиус скругления не больше 10px, границы только 1px. Шрифты разведены по ролям: Instrument Serif для заголовков, Geist Sans для подписей узлов, Geist Mono для технических мелочей вроде портов и типов полей. Акцентный цвет один на диаграмму и достаётся одной-двум главным фигурам.
По умолчанию палитра нейтральная: тёплая бумага, графитовый текст, ржаво-оранжевый акцент. Чтобы подогнать под свой сайт, запускают онбординг: скилл читает главную страницу, вытаскивает палитру и шрифты, раскладывает их по ролям paper, ink, muted, accent, link и проверяет контраст по WCAG AA. Значения можно вписать руками в references/style-guide.md. При первом запуске в новом проекте, если файл стилей остался дефолтным, Claude спросит, что делать: провести онбординг, вставить токены вручную или работать как есть.
Какие задачи решает
- нарисовать архитектуру сервисов с базой и кэшем
- показать рукопожатие OAuth 2.0 по шагам
- разложить проекты по квадранту «влияние — трудозатраты»
- описать жизненный цикл заказа от оплаты до доставки
- собрать ER-модель с полями и связями
Примеры запросов агенту
- Сделай диаграмму архитектуры: фронтенд, бэкенд, Postgres, кэш Redis.
- Нужна sequence-диаграмма рукопожатия OAuth 2.0.
- Настрой diagram-design под мой сайт:
onboard diagram-design to https://yoursite.com.
Как установить diagram-design-editorial
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a claude-code2Вручную: положить файлы
~/.claude/skills/diagram-design-editorial/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/diagram-design-editorial/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a codex2Вручную: положить файлы
.agents/skills/diagram-design-editorial/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a cursor2Вручную: положить файлы
.cursor/skills/diagram-design-editorial/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills diagram-design-editorial2Вручную: положить файлы
.github/skills/diagram-design-editorial/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/diagram-design-editorialВручную: положить файлы
.devin/skills/diagram-design-editorial/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о diagram-design-editorial
Как установить diagram-design-editorial в Claude Code?
Выполните npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a claude-code. После этого скилл лежит в ~/.claude/skills/diagram-design-editorial/SKILL.md.
Что делает diagram-design-editorial?
Генерирует диаграммы 13 типов в виде самодостаточного HTML и SVG для статей и документации. Тип выбирается по вашему описанию, внешний вид можно подогнать под палитру и шрифты сайта.
Что нужно, чтобы диаграммы совпали со стилем сайта?
Онбординг: скилл открывает главную страницу, забирает палитру и шрифты, проверяет контраст и записывает токены в references/style-guide.md. Без него диаграммы выходят в нейтральной палитре.
