mermaid-diagrams · hoodini — скилл для Claude Code: диаграммы Mermaid
Скилл, который учит агента писать диаграммы на синтаксисе Mermaid: блок-схемы, sequence, классы, ER, Gantt. Пригодится, когда нужно нарисовать схему прямо в markdown.
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a claude-codeЧто делает mermaid-diagrams
Внутри — справочник по синтаксису Mermaid с готовыми примерами. Блок-схемы с ромбами и подграфами, sequence-диаграммы с активациями и блоками alt/loop, классы с модификаторами доступа, ER с кардинальностью ||--o{, Gantt с зависимостями задач, а ещё state, pie, gitGraph, journey и mindmap.
Есть раздел про оформление: classDef задаёт цвета заливки и текста для узлов. Отдельно показан React-компонент, который вызывает mermaid.render и вставляет полученный SVG в контейнер. Диаграммы пишутся в блоке кода с идентификатором mermaid — их подхватывают GitHub, GitLab и большинство рендереров markdown.
Скилл ставится в шесть платформ, но пути к файлу разные: в Claude это ~/.claude/skills/mermaid-diagrams/SKILL.md, в Cursor — .cursor/skills/mermaid-diagrams/SKILL.md, в Copilot — .github/skills/mermaid-diagrams/SKILL.md. Если проект открывают несколько человек с разными редакторами, придётся держать копии в каждой папке.
Какие задачи решает
- нарисовать блок-схему процесса прямо в markdown
- описать взаимодействие клиента и сервера sequence-диаграммой
- показать схему таблиц и связи между ними
- собрать план проекта в Gantt с зависимостями задач
- вставить SVG-диаграмму в React-компонент
Примеры запросов агенту
- нарисуй блок-схему обработки заказа в Mermaid
- сделай sequence-диаграмму авторизации через OAuth
- построй ER-диаграмму для таблиц users, orders и products
Как установить mermaid-diagrams
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a claude-code2Вручную: положить файлы
~/.claude/skills/mermaid-diagrams/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mermaid-diagrams/
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a codex2Вручную: положить файлы
.agents/skills/mermaid-diagrams/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a cursor2Вручную: положить файлы
.cursor/skills/mermaid-diagrams/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install hoodini/ai-agents-skills mermaid-diagrams2Вручную: положить файлы
.github/skills/mermaid-diagrams/SKILL.md1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a gemini-cli2Командой платформы
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/mermaid-diagramsВручную: положить файлы
.devin/skills/mermaid-diagrams/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о mermaid-diagrams
Как установить mermaid-diagrams в Claude?
Выполните npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a claude-code. Файл скилла появится по пути ~/.claude/skills/mermaid-diagrams/SKILL.md.
Что делает mermaid-diagrams?
Даёт агенту справочник по синтаксису Mermaid: блок-схемы, sequence, классы, ER, Gantt, state, pie, gitGraph, journey и mindmap. Плюс пример оформления узлов и React-компонент для рендера.
В какие редакторы можно поставить скилл?
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждого свой флаг в команде установки и своя папка, куда кладётся SKILL.md.
Похожие скиллы
Всё по теме «Тексты и документация» →Сначала — mermaid-diagrams от других авторов.
