mermaidjs-v11 — скилл для Claude Code: диаграммы Mermaid из текста
Скилл учит агента писать диаграммы на синтаксисе Mermaid.js v11 и рендерить их в SVG, PNG или PDF. Пригодится, когда нужно нарисовать схему по описанию, а не руками.
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a claude-codeЧто делает mermaidjs-v11
Внутри — справочники по синтаксису больше 24 типов диаграмм: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, journey. Агент берёт оттуда готовые шаблоны и подставляет ваши данные. Отдельные файлы описывают конфигурацию и темы, работу с CLI и встраивание в страницу через JavaScript API.
Диаграмму можно держать прямо в markdown-блоке с пометкой mermaid, а тему задать во фронтматтере блока. Для картинок на выходе есть CLI: пакет @mermaid-js/mermaid-cli ставится глобально через npm, дальше mmdc -i diagram.mmd -o diagram.svg. Тёмная тема и прозрачный фон — флагами -t dark -b transparent, свой CSS подключается через --cssFile.
Для CLI нужен Node.js с npm, потому что mmdc — это npm-пакет. Если рендерите в браузере, хватит подключения mermaid.min.js с CDN и вызова mermaid.initialize. Скилл ставится в шесть платформ, но пути к файлу скилла у каждой свои — проверьте, что установщик положил SKILL.md туда, где ваша IDE его ищет.
Какие задачи решает
- нарисовать блок-схему процесса по текстовому описанию
- собрать диаграмму последовательности для API-вызовов
- описать схему базы данных в erDiagram
- построить график Ганта для плана проекта
- отрендерить .mmd в PNG с прозрачным фоном
Примеры запросов агенту
- сделай flowchart по этому описанию процесса
- нарисуй sequenceDiagram для сценария логина
- собери erDiagram по этой схеме таблиц
Как установить mermaidjs-v11
1Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a claude-code2Вручную: положить файлы
~/.claude/skills/mermaidjs-v11/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mermaidjs-v11/
1Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a codex2Вручную: положить файлы
.agents/skills/mermaidjs-v11/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a cursor2Вручную: положить файлы
.cursor/skills/mermaidjs-v11/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mrgoonie/claudekit-skills mermaidjs-v112Вручную: положить файлы
.github/skills/mermaidjs-v11/SKILL.md1Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a gemini-cli2Командой платформы
gemini skills install https://github.com/mrgoonie/claudekit-skills --path .claude/skills/mermaidjs-v11Вручную: положить файлы
.devin/skills/mermaidjs-v11/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о mermaidjs-v11
Как установить mermaidjs-v11 в Claude?
Выполните npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a claude-code. После этого файл скилла лежит в ~/.claude/skills/mermaidjs-v11/SKILL.md.
Что делает mermaidjs-v11?
Даёт агенту синтаксис Mermaid.js v11 и справочники по типам диаграмм, конфигурации, CLI и встраиванию в страницу. Агент пишет код диаграммы, а рендерите вы в браузере или через mmdc.
Чем рендерить диаграммы в файлы?
CLI-пакетом @mermaid-js/mermaid-cli: npm install -g @mermaid-js/mermaid-cli, затем mmdc -i diagram.mmd -o diagram.svg. Для этого нужен Node.js с npm.
