Naglyadno

---
name: naglyadno
description: "Наглядно: показать и научить рисунком, а не только текстом. Одна мысль — картинка-скетч; 2–8 схем, графиков, графов, ментальных карт — HTML-галерея; большая система — интерактивный холст в духе Excalidraw с иконками, стрелками и подробностями по клику. Применять для сложных отчётов, уроков, устройства команды и продуктов. Триггеры — «покажи схемой», «нарисуй», «наглядно», «визуализируй отчёт», «ментальная карта», «граф», «холст», «карта системы», «дай галерею»."
---

# Наглядно — выбрать форму, нарисовать, проверить глазами

Слово владельца 06.10.2026: «научись не только писать текст, но и иллюстрировать то, что хочешь показать и чему научить».

## Что выбрать

| Что показываем | Форма | Как |
|---|---|---|
| Одна мысль, один процесс, одно сравнение | **Картинка** (скетч-инфографика) | навык `infographic`, путь 1 — не дублируем |
| 2–8 схем, графиков, графов, ментальных карт, таблиц-выводов | **HTML-галерея** | `scripts/gallery.py spec.json out.html` |
| Большая система: люди, роли, связи, десятки узлов | **Холст** | `scripts/canvas.py spec.json out.html` |

Сомнение: если на одну картинку не влезает ≤ 8 блоков текста — это галерея; если нужны связи и «клик за подробностями» — холст.

## Правила (для всех форм)

1. **Факты только из источника.** Каждая цифра и имя — из файла, ответа инструмента или слова владельца. Нет данных — не рисуем. Источник пишем в подвал (`footer`).
2. **Подписи по-русски через `humanizer-ru`:** коротко, без канцелярита, без англицизмов. Вывод под карточкой — одна строка с цифрой.
3. **Приёмка глазами.** Готовое открыть и посмотреть (Read по PNG): ничего не обрезано, подписи читаются, цифры совпали с источником. Где есть Chrome — `scripts/shot.sh in.html out.png [W] [H] [dark]` (headless Chrome, путь — `CHROME` или поиск); в контейнере Chrome нет — `--queue` (см. ниже), потом Read по PNG.
4. **Без кухни и данных клиентов наружу.** В схеме, уходящей клиенту или в публичный канал: ни цен и тарифов, ни переписки, ни имён людей-клиентов (только названия компаний), ни токенов. Закрытый клиент (`clients/privacy.json`) — только в схеме для него самого.
5. **Один файл — один владелец.** Спеки и результат — в папке дела, не поверх чужих файлов.

## Картинка (одна мысль)

Идти по `infographic` → «Путь 1»: выжимка → humanizer-ru → промпт из `infographic/prompts/style-sketch.md` → `genimage.py --model gemini-3-pro --size 4:5 --quality 1K` → Read. Формат: 4:5 лента, 9:16 сторис, 16:9 слайд. ≈ $0,14 за кадр, не больше 3 попыток на мысль. Ключ — как в навыке, не печатать; клиенту — на ключе клиента. Нет ключа — галерея (текст-карточка с крупной цифрой) вместо картинки.
Отправка: `reply` с `files: ["/абс/путь.png"]` и одной строкой смысла.

## Галерея

```bash
python3 ~/.claude/skills/naglyadno/scripts/gallery.py spec.json out.html [--queue W H]
```
Один самодостаточный HTML (картинки зашиты внутрь), светлая и тёмная тема (кнопка «Тема»), открывается из `file://`. Библиотеки: mermaid и Chart.js с jsdelivr/cdnjs, нужен интернет у смотрящего.

```json
{"title":"…","subtitle":"…","footer":"источник…","cols":2,"cards":[
 {"type":"mermaid","title":"…","code":"flowchart LR\n A-->B","takeaway":"вывод в одну строку","wide":true},
 {"type":"chart","title":"…","chart":{"type":"bar|line|pie|doughnut","labels":["a","b"],"datasets":[{"label":"…","data":[1,2]}]},"takeaway":"…"},
 {"type":"image","title":"…","src":"pic.png","takeaway":"…"},
 {"type":"text","title":"…","big":"405 → 200","body":"что было","takeaway":"что стало"}]}
```
mermaid понимает: `flowchart`, `mindmap`, `sequenceDiagram`, `gantt`, `timeline`, `graph`, `stateDiagram-v2`, `erDiagram`. Переводы строки внутри узла — `<br/>`. Ошибка в синтаксисе покажется в карточке красным текстом — исправить и пересобрать.

## Холст

```bash
python3 ~/.claude/skills/naglyadno/scripts/canvas.py spec.json out.html [--queue W H]
```
Рисованный стиль (SVG + rough.js), колесо — зум, перетаскивание — панорама, на телефоне два пальца, «⤢ Всё» — вписать. Клик по узлу — панель: роль, владелец, статус, связи. Рядом кладётся `out.excalidraw`: открыть на excalidraw.com (Open) и править руками; кнопка «⬇ .excalidraw» в самой странице отдаёт тот же файл.

```json
{"title":"…","subtitle":"…","footer":"источник","legend":[{"kind":"ведёт","color":"#0f766e","dash":"dash","label":"ведёт"}],
 "groups":[{"id":"g1","title":"Наши","color":"#0f766e","x":0,"y":0,"w":460,"h":250}],
 "nodes":[{"id":"a","icon":"🌟","title":"Отдел продаж","sub":"3 человека","x":10,"y":60,"w":200,"h":76,"color":"#c2410c","big":false,
           "details":{"Роль":"…","Владелец":"…","Статус":"🟢 жива"},"note":"абзац внизу панели"}],
 "edges":[{"from":"a","to":"b","kind":"ведёт","label":"подпись"}]}
```
`dash`: `null` сплошная, `"dash"` пунктир, `"dot"` точки. Координаты — пиксели холста; узел 200×76, шаг 220×92, группе +56 сверху под заголовок. Если узлов больше 40 — делить на два холста по смыслу. Спеку для большого холста собирать скриптом из источника (маленький скрипт, который читает таблицу или файл и пишет spec.json), а не руками.

## Холст-ссылка (если задан MILA_CANVAS_URL)

Если у дома есть свой сервер холстов (Excalidraw с API `POST /api/scene`, `PUT /api/scene/<id>`), холст отдаётся
**ссылкой**: владелец открывает на телефоне и компьютере, смотрит, двигает, правит, правки сохраняются на сервере.

```bash
python3 ~/.claude/skills/naglyadno/scripts/canvas_publish.py spec.json [--title "Название"]   # или file.excalidraw
python3 …/canvas_publish.py spec.json --update <id>      # переопубликовать в ту же ссылку (затрёт правки владельца — спросить)
```
Печатает `$MILA_CANVAS_URL/#<id>` — эту ссылку и отправлять (`reply`, одна строка смысла). Ссылка = доступ: не для
закрытых клиентов и кухни, правило 4 выше. `CANVAS_API` — необязательный внутренний адрес того же API (из контейнера).
`MILA_CANVAS_URL` не задан (по умолчанию) — скрипт кладёт рядом `.excalidraw` и печатает путь: отправить файлом
вместе с HTML-холстом («откройте на excalidraw.com → Open»).

## Отправка в Telegram

- **Картинка** — `reply` с `files`, одна строка выжимки.
- **Галерея и холст** — html-файлом (`files`) + 1–2 строки: что внутри и главный вывод. Файл открывается в браузере; в Telegram встроенный просмотр HTML слабый — так и сказать: «откройте в браузере».
- **PNG галереи/холста** (если нужно превью в ленте): где есть Chrome — `shot.sh`, в контейнере `--queue` → `~/work/<папка>/<имя>.png` после `.done`.

## Контейнер (Милы без Chrome)

HTML собирается без Chrome (только stdlib Python). Для PNG: `python3 …/gallery.py spec.json ~/work/папка/out.html --queue 1280 1800` — заявка уходит в `~/work/render-queue/`, хост рисует PNG раз в минуту и пишет `.done` (ok или ошибка). HTML обязан лежать внутри `~/work`.