# mermaid-diagrams

Скилл, который учит агента писать диаграммы на синтаксисе Mermaid: блок-схемы, sequence, классы, ER, Gantt. Пригодится, когда нужно нарисовать схему прямо в markdown.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 406 установок · ★ 291
- Автор: hoodini
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/hoodini/ai-agents-skills/tree/HEAD/skills/mermaid-diagrams/SKILL.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/skills/hoodini-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`. Если проект открывают несколько человек с разными редакторами, придётся держать копии в каждой папке.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/mermaid-diagrams/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/mermaid-diagrams/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/mermaid-diagrams/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/mermaid-diagrams/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hoodini/ai-agents-skills mermaid-diagrams
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/mermaid-diagrams/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/mermaid-diagrams
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/mermaid-diagrams/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/hoodini/ai-agents-skills/tree/HEAD/skills/mermaid-diagrams/SKILL.md

## Когда брать
- нарисовать блок-схему процесса прямо в markdown
- описать взаимодействие клиента и сервера sequence-диаграммой
- показать схему таблиц и связи между ними
- собрать план проекта в Gantt с зависимостями задач
- вставить SVG-диаграмму в React-компонент

## Примеры запросов агенту
- нарисуй блок-схему обработки заказа в Mermaid
- сделай sequence-диаграмму авторизации через OAuth
- построй ER-диаграмму для таблиц users, orders и products

## Похожие
- [utility-mermaid-diagrams](https://affpapa.org/nevibecode/skills/utility-mermaid-diagrams.md) — скилл · 736 установок
- [design-doc-mermaid](https://affpapa.org/nevibecode/skills/design-doc-mermaid.md) — скилл · 80700 установок
- [mermaid-diagram-generator](https://affpapa.org/nevibecode/skills/mermaid-diagram-generator.md) — скилл · 331 установка
- [mermaid-tools](https://affpapa.org/nevibecode/skills/mermaid-tools.md) — скилл · 1500 установок
- [mermaid-expert](https://affpapa.org/nevibecode/agents/mermaid-expert.md) — субагент · ★ 41729
- [mermaidjs-v11](https://affpapa.org/nevibecode/skills/mermaidjs-v11.md) — скилл · 362 установки

## Другие версии с тем же именем
- [mermaid-diagrams · davila7](https://affpapa.org/nevibecode/skills/mermaid-diagrams.md) — 1180 установок

Из того же набора: [hoodini/ai-agents-skills](https://affpapa.org/nevibecode/by/hoodini/ai-agents-skills.md) — 5 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md