# mermaidjs-v11

Скилл учит агента писать диаграммы на синтаксисе Mermaid.js v11 и рендерить их в SVG, PNG или PDF. Пригодится, когда нужно нарисовать схему по описанию, а не руками.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 362 установки · ★ 2228
- Автор: mrgoonie
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/mermaidjs-v11/SKILL.md
- Обновлён: 2026-04-03
- HTML: https://affpapa.org/nevibecode/skills/mermaidjs-v11

## Что делает

Внутри — справочники по синтаксису больше 24 типов диаграмм: `flowchart`, `sequenceDiagram`, `classDiagram`, `stateDiagram`, `erDiagram`, `gantt`, `journey`. Агент берёт оттуда готовые шаблоны и подставляет ваши данные. Отдельные файлы описывают конфигурацию и темы, работу с CLI и встраивание в страницу через JavaScript API.

Диаграмму можно держать прямо в markdown-блоке с пометкой `mermaid`, а тему задать во фронтматтере блока. Для картинок на выходе есть CLI: пакет `@mermaid-js/mermaid-cli` ставится глобально через npm, дальше `mmdc -i diagram.mmd -o diagram.svg`. Тёмная тема и прозрачный фон — флагами `-t dark -b transparent`, свой CSS подключается через `--cssFile`.

Для CLI нужен Node.js с npm, потому что `mmdc` — это npm-пакет. Если рендерите в браузере, хватит подключения `mermaid.min.js` с CDN и вызова `mermaid.initialize`. Скилл ставится в шесть платформ, но пути к файлу скилла у каждой свои — проверьте, что установщик положил `SKILL.md` туда, где ваша IDE его ищет.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mrgoonie/claudekit-skills mermaidjs-v11
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/mrgoonie/claudekit-skills --path .claude/skills/mermaidjs-v11
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/mermaidjs-v11/SKILL.md

## Когда брать
- нарисовать блок-схему процесса по текстовому описанию
- собрать диаграмму последовательности для API-вызовов
- описать схему базы данных в erDiagram
- построить график Ганта для плана проекта
- отрендерить .mmd в PNG с прозрачным фоном

## Примеры запросов агенту
- сделай flowchart по этому описанию процесса
- нарисуй sequenceDiagram для сценария логина
- собери erDiagram по этой схеме таблиц

## Похожие
- [mermaid-diagrams](https://affpapa.org/nevibecode/skills/hoodini-mermaid-diagrams.md) — скилл · 406 установок
- [mermaid-diagram-generator](https://affpapa.org/nevibecode/skills/mermaid-diagram-generator.md) — скилл · 331 установка
- [design-doc-mermaid](https://affpapa.org/nevibecode/skills/design-doc-mermaid.md) — скилл · 80700 установок
- [utility-mermaid-diagrams](https://affpapa.org/nevibecode/skills/utility-mermaid-diagrams.md) — скилл · 736 установок
- [mermaid-tools](https://affpapa.org/nevibecode/skills/mermaid-tools.md) — скилл · 1500 установок
- [cli-anything-mermaid](https://affpapa.org/nevibecode/skills/cli-anything-mermaid.md) — скилл · 519 установок

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

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