mermaid-skill — скилл для Claude Code: диаграммы и установка
Скилл создаёт Mermaid-диаграммы и экспортирует их в PNG, SVG или PDF. Пригодится для схем API, архитектуры и баз данных.
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a claude-codeЧто делает mermaid-skill
Скилл генерирует текстовые файлы .mmd для flowchart, sequence, class, ER, state, gantt и других типов диаграмм. Он использует автоматическую раскладку, а результат можно сохранить в PNG, SVG или PDF через mmdc либо Kroki API.
Перед экспортом схема проходит проверку синтаксиса. После рендера скилл предлагает проверить читаемость изображения: обрезанные подписи, плотность элементов и ориентацию. Для локального режима нужны @mermaid-js/mermaid-cli и headless Chrome; без браузера локальный экспорт завершится ошибкой, поэтому используйте Kroki с curl.
В CI и Docker для mmdc предусмотрен Puppeteer-конфиг с настройкой --no-sandbox. Скилл также поддерживает цикл правок и повторный экспорт одной и той же пары файлов, а после нескольких итераций может передать диаграмму в Mermaid Live.
Какие задачи решает
- собрать схему API или архитектуры в
.mmd - показать последовательность аутентификации
- описать связи таблиц в ER-диаграмме
- экспортировать Mermaid в PNG, SVG или PDF
Примеры запросов агенту
- Создай диаграмму архитектуры сервиса в
architecture.mmdи экспортируй её в SVG. - Покажи последовательность аутентификации между клиентом, API и базой данных.
- Сделай ER-диаграмму по этим таблицам, проверь её и сохрани в
schema.png.
Как установить mermaid-skill
1Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a claude-code2Вручную: положить файлы
~/.claude/skills/mermaid-skill/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mermaid-skill/
1Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a codex2Вручную: положить файлы
.agents/skills/mermaid-skill/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a cursor2Вручную: положить файлы
.cursor/skills/mermaid-skill/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Agents365-ai/365-skills mermaid-skill2Вручную: положить файлы
.github/skills/mermaid-skill/SKILL.md1Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a gemini-cli2Командой платформы
gemini skills install https://github.com/Agents365-ai/365-skills --path plugins/mermaid/skills/mermaid-skillВручную: положить файлы
.devin/skills/mermaid-skill/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о mermaid-skill
Как установить mermaid-skill в Claude Code?
Выполните npx skills add Agents365-ai/365-skills --skill mermaid-skill -a claude-code, затем проверьте файл ~/.claude/skills/mermaid-skill/SKILL.md.
Что делает mermaid-skill?
Он создаёт .mmd с Mermaid-кодом, проверяет синтаксис и экспортирует диаграммы в PNG, SVG или PDF через mmdc или Kroki.
Что нужно для локального экспорта Mermaid?
Нужны @mermaid-js/mermaid-cli и headless Chrome. Если браузер не установлен, экспорт через mmdc сломается; для такого случая скилл использует Kroki и curl.
