design-doc-mermaid — скилл для Claude Code: что делает и как ставить
Генерирует диаграммы Mermaid и техническую документацию по коду или описанию задачи. Подходит для оформления GitHub wiki, системных архитектур и схем баз данных.
npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a claude-codeЧто делает design-doc-mermaid
Скилл выбирает подходящий тип диаграммы под запрос пользователя через встроенное дерево решений. Он подтягивает нужные инструкции для процессов, облачной инфраструктуры, последовательностей вызовов API или моделей сущностей. В набор входят шаблоны для системного дизайна, описания API и архитектурных документов.
Для извлечения диаграмм из готовых кодовых баз есть сценарии под Spring Boot, FastAPI, React, Node.js и ETL-пайплайны. В составе имеются Python-скрипты extract_mermaid.py и mermaid_to_image.py, а проверка разметки выполняется через утилиту mmdc.
Если GitHub не отображает экспериментальные блоки C4 или architecture-beta, скилл сразу переключается на проверенный синтаксис flowchart TD. Для Confluence одного текстового блока недостаточно: там дополнительно требуется выгрузка схемы в PNG или SVG.
Какие задачи решает
- построить диаграмму взаимодействия микросервисов по коду контроллеров
- составить архитектурный документ с описанием базы данных и API
- сформировать схему процессов и бизнес-логики для GitHub wiki
- экспортировать диаграммы Mermaid в формат PNG или SVG для Confluence
Примеры запросов агенту
- Составь диаграмму последовательности для авторизации пользователей по этому коду FastAPI
- Оформи архитектурный документ для сервиса платежей с диаграммой базы данных
- Построй схему развёртывания инфраструктуры в облаке для нашей системы
Как установить design-doc-mermaid
1Через Skills CLI (Vercel)
npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a claude-code2Вручную: положить файлы
~/.claude/skills/design-doc-mermaid/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-doc-mermaid/
1Через Skills CLI (Vercel)
npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a codex2Вручную: положить файлы
.agents/skills/design-doc-mermaid/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a cursor2Вручную: положить файлы
.cursor/skills/design-doc-mermaid/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install SpillwaveSolutions/design-doc-mermaid design-doc-mermaid2Вручную: положить файлы
.github/skills/design-doc-mermaid/SKILL.md1Через Skills CLI (Vercel)
npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a gemini-cli2Командой платформы
gemini skills install https://github.com/SpillwaveSolutions/design-doc-mermaidВручную: положить файлы
.devin/skills/design-doc-mermaid/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о design-doc-mermaid
Как установить design-doc-mermaid в Claude Code?
Выполните команду npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a claude-code. Также можно вручную сохранить файл по пути ~/.claude/skills/design-doc-mermaid/SKILL.md.
Что делает скилл design-doc-mermaid?
Он анализирует запросы или программный код и создаёт диаграммы Mermaid: последовательности, архитектуру, процессы или ER-схемы. Дополнительно он подготавливает шаблоны проектной документации.
Что делать, если GitHub wiki не отображает диаграмму C4?
В таком случае скилл переводит разметку в базовый формат flowchart TD, который поддерживается рендерером GitHub без сбоев.
