mermaid-diagrams · davila7 — скилл для Claude Code: диаграммы из текста
Скилл учит агента писать диаграммы Mermaid: классы, последовательности, ERD, C4, флоучарты. Пригодится, когда нужно задокументировать архитектуру или схему БД.
npx claude-code-templates@latest --skill creative-design/mermaid-diagramsЧто делает mermaid-diagrams
Скилл подсказывает агенту синтаксис Mermaid и помогает выбрать тип диаграммы под задачу. Внутри — разбор классов и доменного моделирования, sequence-диаграмм для API и потоков аутентификации, флоучартов для алгоритмов и пользовательских сценариев, ERD для схем БД, C4 для архитектуры на уровнях контекста, контейнеров и компонентов. Есть ещё state-диаграммы, git-графы, гант и круговые графики.
Схема работы простая: первая строка задаёт тип диаграммы, дальше идёт описание. Комментарии начинаются с %%. Незнакомые слова ломают диаграмму, а неверные параметры просто игнорируются без ошибки — поэтому проверять синтаксис лучше в Mermaid Live Editor. Рядом со скиллом лежат справочники по каждому типу: references/class-diagrams.md, references/sequence-diagrams.md, references/flowcharts.md, references/erd-diagrams.md, references/c4-diagrams.md и references/advanced-features.md.
Темы и вёрстку настраивают через frontmatter: доступны темы default, forest, dark, neutral и base, layout dagre или elk, вид classic или handDrawn. Готовые .mmd-файлы удобно держать в репозитории рядом с кодом — GitHub и GitLab рендерят Mermaid прямо в Markdown. Для экспорта в PNG или SVG есть Mermaid CLI: npm install -g @mermaid-js/mermaid-cli, дальше mmdc -i input.mmd -o output.png.
Какие задачи решает
- описать схему базы данных в ERD перед миграцией
- показать поток запросов к API на sequence-диаграмме
- разложить архитектуру системы по уровням C4
- нарисовать флоучарт пользовательского сценария
- собрать git-граф ветвления для документации
Примеры запросов агенту
- нарисуй sequence-диаграмму потока логина через API
- сделай ERD для таблиц USER, ORDER и LINE_ITEM
- покажи архитектуру сервиса диаграммой C4 на уровне контейнеров
Как установить mermaid-diagrams
1Через claude-code-templates
npx claude-code-templates@latest --skill creative-design/mermaid-diagrams2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill mermaid-diagrams -a claude-code3Вручную: положить файлы
~/.claude/skills/mermaid-diagrams/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mermaid-diagrams/
Вручную: положить файлы
.agents/skills/mermaid-diagrams/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/mermaid-diagrams/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates mermaid-diagrams2Вручную: положить файлы
.github/skills/mermaid-diagrams/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/mermaid-diagramsВручную: положить файлы
.devin/skills/mermaid-diagrams/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о mermaid-diagrams
Как установить mermaid-diagrams в Claude?
Через шаблоны: npx claude-code-templates@latest --skill creative-design/mermaid-diagrams. Второй способ — npx skills add davila7/claude-code-templates --skill mermaid-diagrams -a claude-code. Файл скилла окажется в ~/.claude/skills/mermaid-diagrams/SKILL.md.
Что делает mermaid-diagrams?
Даёт агенту руководство по синтаксису Mermaid и помогает выбрать подходящий тип диаграммы: классы, последовательности, флоучарты, ERD, C4, состояния, git-графы, гант и графики.
Где рендерятся такие диаграммы?
GitHub и GitLab показывают Mermaid прямо в Markdown, VS Code — с расширением Markdown Mermaid, ещё есть поддержка в Notion, Obsidian и Confluence. Для экспорта в PNG или SVG подойдёт Mermaid CLI.
Похожие скиллы
Всё по теме «Тексты и документация» →Сначала — mermaid-diagrams от других авторов.
