# flowchart-creator

Скилл собирает блок-схемы и деревья решений в один HTML-файл с SVG. Пригодится, когда процесс нужно показать, а не описать словами.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 735 установок · ★ 689
- Автор: mhattingpete
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/mhattingpete/claude-skills-marketplace/tree/HEAD/visual-documentation-plugin/skills/flowchart-creator/SKILL.md
- Обновлён: 2026-07-25
- HTML: https://affpapa.org/nevibecode/skills/flowchart-creator

## Что делает

Скилл разбирает процесс на шаги, находит точки ветвления и верстает схему в HTML с инлайновым SVG. Внутри — набор готовых фигур: скруглённые прямоугольники для начала и конца, обычные прямоугольники для шагов, ромбы для решений, стрелки с подписями на ветках. Есть и swimlanes, если процесс делится между ролями или системами.

Стили заданы по классам: `.start-end`, `.process`, `.decision`. Цвета фиксированные — зелёный, синий, оранжевый, — так что палитру под свой проект придётся править руками. Готовый файл скилл пишет как `[process]-flowchart.html`.

Схема получается статичной картинкой в SVG, без интерактива и перетаскивания узлов. Если нужен редактор с живой правкой, это не он. Зато результат открывается в браузере без сборки и зависимостей.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mhattingpete/claude-skills-marketplace flowchart-creator
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/mhattingpete/claude-skills-marketplace --path visual-documentation-plugin/skills/flowchart-creator
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/mhattingpete/claude-skills-marketplace/tree/HEAD/visual-documentation-plugin/skills/flowchart-creator/SKILL.md

## Когда брать
- нарисовать блок-схему процесса в HTML без графического редактора
- собрать дерево решений с подписанными ветками
- показать workflow с разделением по ролям через swimlanes
- получить схему в SVG, которую можно вставить в документацию
- разложить процесс на шаги и точки ветвления

## Примеры запросов агенту
- Сделай блок-схему процесса оформления заказа
- Построй дерево решений для проверки заявки на кредит
- Покажи workflow согласования документа со swimlanes по отделам

## Похожие
- [diagram-creator](https://affpapa.org/nevibecode/skills/diagram-creator.md) — скилл · 5000 установок
- [baoyu-diagram](https://affpapa.org/nevibecode/skills/baoyu-diagram.md) — скилл · 15400 установок
- [mermaid-visualizer](https://affpapa.org/nevibecode/skills/mermaid-visualizer.md) — скилл · 1700 установок
- [architecture-diagram](https://affpapa.org/nevibecode/skills/architecture-diagram.md) — скилл · 2100 установок
- [tldraw-skill](https://affpapa.org/nevibecode/skills/tldraw-skill.md) — скилл · 3700 установок
- [patent-diagram-generator](https://affpapa.org/nevibecode/skills/patent-diagram-generator.md) — скилл · 313 установок

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

_Часть страницы не вошла по размеру — она есть в HTML-версии._

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