mermaid-diagram-specialist — скилл для Claude Code: установка
Генерирует диаграммы Mermaid прямо в Markdown: от блок-схем и ER-диаграмм до C4 и таймлайнов. Пригодится при составлении технической документации и проектировании архитектуры.
npx claude-code-templates@latest --skill development/mermaid-diagram-specialistЧто делает mermaid-diagram-specialist
Скилл помогает ассистенту переводить описания систем, процессов или баз данных в разметку Mermaid. Сначала он подбирает подходящий вид визуализации под задачу. Это может быть блок-схема для ветвящихся процессов, диаграмма последовательности для API-вызовов, ERD для структуры таблиц или C4 для архитектурных уровней. В инструкциях заложены шаблоны для графов Git, пользовательских сценариев и диаграмм Ганта.
При создании разметки ассистент следует строгому синтаксису Mermaid. Он настраивает направление обхода (TD или LR), задаёт геометрию узлов от ромбов до баз данных и расставляет стрелки связей с учётом синхронности вызовов. Для баз данных указываются типы колонок, первичные и внешние ключи, а также точная мощность отношений.
Чтобы получить осмысленную диаграмму, модели понадобятся технические спецификации или понятное текстовое описание системы: при размытых вводных связям придётся додумывать логику. Никаких внешних библиотек для рендеринга не требуется, результат сразу готов к просмотру в Markdown-редакторах.
Какие задачи решает
- построить блок-схему логики ветвления процессов
- задокументировать связи сущностей и типы полей в базе данных
- описать последовательность вызовов между API и сервисами
- визуализировать архитектурные уровни системы в модели C4
Примеры запросов агенту
- Составь sequence-диаграмму авторизации через внешний OAuth-сервис с обработкой ошибок
- Построй ERD для сервиса бронирования: таблицы пользователей, заказов и отелей со связями
- Сделай блок-схему процесса оформления заказа от корзины до списания оплаты
Как установить mermaid-diagram-specialist
1Через claude-code-templates
npx claude-code-templates@latest --skill development/mermaid-diagram-specialist2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill mermaid-diagram-specialist -a claude-code3Вручную: положить файлы
~/.claude/skills/mermaid-diagram-specialist/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mermaid-diagram-specialist/
Вручную: положить файлы
.agents/skills/mermaid-diagram-specialist/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/mermaid-diagram-specialist/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates mermaid-diagram-specialist2Вручную: положить файлы
.github/skills/mermaid-diagram-specialist/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/mermaid-diagram-specialistВручную: положить файлы
.devin/skills/mermaid-diagram-specialist/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о mermaid-diagram-specialist
Как установить mermaid-diagram-specialist в Claude Code?
Выполните в терминале команду npx claude-code-templates@latest --skill development/mermaid-diagram-specialist. Конфигурацию также можно сохранить вручную в файле ~/.claude/skills/mermaid-diagram-specialist/SKILL.md.
Какие типы диаграмм умеет создавать этот скилл?
Он поддерживает блок-схемы, диаграммы последовательности, ER-схемы, графы классов, диаграммы состояний, таймлайны Ганта, C4, круговые чарты, графы Git и пути пользователя.
Что нужно предоставить агенту для корректной генерации?
Требуются текстовое описание логики, технические требования к компонентам или перечень сущностей базы данных. Цветовые палитры дизайн-системы можно передать опционально.
