SeeCode — скилл
Скилл рисует по короткой JSON-спецификации анимированные диаграммы 45 типов и сохраняет их в HTML, SVG, PNG, GIF и MP4
- 736 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент запускает Node-скрипты скилла и пишет файлы диаграмм в папку вывода
- Для PNG, GIF и MP4 из командной строки скрипты запускают установленный Chrome или Edge
- Команда scan читает файлы выбранной папки репозитория, чтобы нанести их на схему
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/seecodeОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент запускает Node-скрипты скилла и пишет файлы диаграмм в папку вывода
- Для PNG, GIF и MP4 из командной строки скрипты запускают установленный Chrome или Edge
- Команда scan читает файлы выбранной папки репозитория, чтобы нанести их на схему
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
SeeCode превращает просьбу «нарисуй, как устроен заказ» в диаграмму, которую можно разглядывать. Агент пишет JSON-спецификацию на 30–150 строк, а скрипты скилла сами считают раскладку, маршруты связей, подписи, анимацию и доступность. Результат — один HTML-файл: наведите курсор на узел, и его связи подсветятся бегущей линией, клик приблизит камеру и откроет панель с описанием, а выбор начала и конца маршрута проведет по нему шаг за шагом. Типов 45: архитектура, блок-схема, диаграмма последовательности, конечный автомат, ER и схема базы данных, UML-классы, дорожки, таймлайн, диаграмма Ганта, воронка, Венн, квадрант, карта Уордли, столбцы, линии, санки, тепловая карта и три изометрических типа для предметов, разобранных схем и планов этажей. Числа для графиков агент берет из файла CSV или JSON, поэтому данные не проходят через модель. Уже готовые схемы скилл перерисовывает в своем стиле. Он читает Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw, Structurizr, BPMN, SQL, Prisma, DBML, OpenAPI и таблицы CSV. По просьбе «нарисуй этот репозиторий» он сначала сканирует папку и привязывает узлы к файлам. Цвета и шрифты можно взять с вашего сайта или из CSS-токенов проекта. Готовую диаграмму сохраняют как SVG для документов и презентаций, PNG, JPEG, GIF или MP4 для чатов и выступлений. Скилл сам выбирает формат по тому, куда диаграмма попадет.
Для кого. Разработчикам, архитекторам и техническим писателям, которым нужны диаграммы для документации, презентаций и постов, и тем, кто хочет перерисовать старые схемы из Mermaid или draw.io в единый стиль.
Подходит, если
- Нужно показать, как запрос проходит через браузер, API, Postgres, Stripe и Kafka, и чтобы читатель мог навести курсор на любой узел
- В документе лежат несколько блоков Mermaid, и их надо перерисовать в одном стиле, по одному файлу на диаграмму плюс общая страница index.html
- Для презентации нужен GIF или MP4, где схема собирается шаг за шагом
- Агенту надо отобразить репозиторий: модули, импорты и инфраструктуру со ссылками на файлы и строки
- Цвета диаграмм должны совпасть с брендом: скилл читает палитру и шрифты со страницы сайта или из CSS проекта
Не подходит, если
- Нужен обычный список: для него хватит маркированного перечня
- Нужно сравнить атрибуты до и после: таблица читается быстрее диаграммы
- Весь смысл укладывается в один блок с подписью: достаточно одного предложения
- Диаграмма получается из десятков узлов: скилл советует не больше 9 узлов и 12 связей на схему и предлагает разбить большую на несколько
- Среда не позволяет запускать Node.js 20 или новее: скрипты скилла работают только на нем
Пример запроса к агенту
Используй SeeCode и покажи, как работает оплата: браузер вызывает API, API пишет в Postgres, списывает деньги через Stripe и отправляет событие в Kafka. Подсвети путь платежа и сделай темную темуОграничения
Нужен Node.js 20 или новее. Для SVG хватает одного Node.js, а PNG, JPEG, GIF и MP4 из командной строки собирают через установленный Chrome или Edge. В самой странице меню Export сохраняет все форматы без дополнительных программ.
Шрифты готовые диаграммы подгружают из Google Fonts, кодировщики GIF и MP4 в браузере берутся с jsDelivr. Чтобы отказаться от Google Fonts, выполните `config set fonts system`. Во всем остальном сервера, аккаунтов и телеметрии у скилла нет.
В правом нижнем углу каждой диаграммы стоит небольшая отметка SeeCode, ее убирают просьбой агенту.
Как отключить. В Claude Code выполните `/plugin` и отключите или удалите плагин seecode. Если ставили через `npx skills add`, удалите папку скилла seecode из каталога скиллов агента, а при ручной установке уберите симлинк `~/.claude/skills/seecode`. Созданные диаграммы остаются в папке вывода как обычные файлы.
Частые вопросы
Как поставить SeeCode в Claude Code?
Выполните `/plugin marketplace add Aryanutkarsh/seecode`, затем `/plugin install seecode@seecode`. Плагин добавляет команды `/seecode:export`, `/seecode:import`, `/seecode:doctor` и `/seecode:settings`. В разделе Marketplaces команды `/plugin` можно включить автообновление.
Какие форматы файлов SeeCode умеет перерисовывать?
Mermaid (`.mmd`, `.mermaid` и блоки в Markdown), Graphviz, PlantUML, D2, draw.io, Excalidraw, Structurizr, BPMN, SQL, Prisma, DBML, OpenAPI и таблицы CSV с JSON. Если в файле несколько диаграмм, получится папка с отдельным файлом на каждую и страницей index.html для просмотра. Цвета, шрифты и координаты исходника не переносятся.
Как поставить SeeCode в Cursor или Codex?
Для любого хоста Agent Skills подойдет `npx skills add Aryanutkarsh/seecode -g`. В Codex есть и плагинный путь: `codex plugin marketplace add Aryanutkarsh/seecode`, затем `codex plugin add seecode@seecode`. Для GitHub Copilot нужны команды `copilot plugin marketplace add Aryanutkarsh/seecode` и `copilot plugin install seecode@seecode`.
Как загрузить SeeCode в Claude.ai или Claude Desktop?
Скачайте архив seecode.zip из последнего релиза репозитория и загрузите его в Settings, затем Capabilities, затем Skills. Файлы изображений и видео там берутся из меню Export самой диаграммы.
Сколько токенов тратит SeeCode на одну диаграмму?
Около 1,4 тысячи токенов агента на диаграмму. Если SVG рисует сама модель, выходит примерно 15 тысяч. Экономия появляется потому, что агент пишет 30–150 строк JSON, а раскладку и отрисовку берут на себя скрипты.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл рисует редакторские диаграммы как самостоятельные файлы HTML и SVG: архитектура, блок-схемы, ER, воронки и еще около сорока типов
Генератор архитектурных диаграмм
Architecture Diagram Generator
Скилл рисует архитектурную схему системы в виде одного HTML-файла с SVG, кнопками копирования и экспорта в PNG и PDF
Скилл верстает по шаблонам резюме, одностраничники, письма, отчеты и слайды в PDF, PNG и PPTX и проверяет результат скриптами до выдачи
Скилл рисует проверенные схемы архитектуры, процессов, последовательностей и потоков данных в один интерактивный HTML-файл
Draw.io Skill
Draw.io Skill for Claude & Codex
Скиллы для диаграмм draw.io: архитектура, сети, блок-схемы, импорт из Terraform и кода, офлайн-генерация из YAML и экспорт в PNG и SVG
Скилл для редактируемых диаграмм draw.io из текста, кода, Terraform, Kubernetes, SQL и OpenAPI с экспортом и самопроверкой
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| SeeCode (эта запись) | нет | 736 | ||
| Diagram Design | нет | 62 871 | рисует редакторские диаграммы в HTML и SVG без интерактивного разбора маршрутов и экспорта в GIF и MP4 | |
| drawio-skill | нет | 10 445 | строит редактируемые диаграммы draw.io, которые затем правят вручную в редакторе | |
| MCP Mermaid | нет | не нужна | 646 | MCP-сервер, который по запросу отдает диаграмму Mermaid с проверкой синтаксиса |
Коротко о README
README открывается обещанием: «диаграммы, которые двигаются, объясняют и экспортируют себя». Дальше идут установка для Claude Code, Cursor, Codex, Copilot и Claude.ai, галерея из 45 типов с примерами, разделы про изометрию, повседневные темы вроде плана отпуска, интерактивность, темы оформления, импорт чужих форматов и экспорт. Есть список случаев, когда диаграмма не нужна, правила обновления для каждого способа установки и раздел о приватности: у скилла нет сервера, аккаунтов и телеметрии.
Бейдж для README
Исходный SKILL.md
--- name: seecode description: "Create animated, explorable editorial diagrams in 45 types (architecture, flowchart, sequence, state, ER, DB schema, UML class, swimlane, timeline, gantt, journey, tree, org chart, nested, venn, quadrant, fishbone, wardley, bar, line, scatter, sankey, treemap, heatmap, 3D isometric objects, floor plans and exploded views) as standalone HTML from a short JSON spec. Use when the user asks to draw, diagram, chart or visualize a system, codebase, flow, process, API call sequence, hierarchy, data or a physical object (a chair); to convert Mermaid, Graphviz/DOT, PlantUML, D2, draw.io, Excalidraw, SQL or CSV into a clean diagram; or to export a diagram as PNG, JPEG, SVG, GIF or MP4. Also for everyday plans: trips, moves, job hunts, approvals, budgets, where money goes." license: MIT metadata: version: "0.6.2" --- # SeeCode You write a **compact JSON spec**; scripts do layout, styling, motion, checks, export. Never write or read SVG/HTML. `SC` = `node <this skill's folder>/scripts/seecode.mjs`; each command prints one JSON line. ## 0. Settings + brand (once per project) `SC config status`. On `"state":"first-run"` ask its `ask` once, then `SC config init --use global|project`. **Brand:** no `settings.profile` but a brand is known (URL, theme tokens, colours)? Run `SC brand <url|dir>` or `SC brand --colors "#hex,…"`, show the palette, rerun with `--save <name> --use`. No brand: keep the defaults. See `references/onboarding.md`. ## 1. Where will it live? Then pick the type Settle destination, look, size, audience; everyday subjects too (`references/delivery.md`): infer; ask one question only if it matters. - **Explain / "artifact" / share:** the standalone **HTML** (motion, trace, focus); publish an artifact as-is. - **PDF / Word / docs / README / slides:** **SVG** first (vector), PNG fallback: `SC export x.html --for pdf|docs|readme|slides|gdocs|social|video`. Draw only if a picture beats a table or prose. | Showing | Type | |---|---| | Components + connections | `architecture` | | Decisions / branches | `flowchart` | | Messages over time | `sequence` | | States + transitions | `state` | | Tables / entities | `db-schema`, `er` | | Hierarchy | `tree` | | Amounts | `bar` | | A physical object | `isometric` | Others: `references/types/INDEX.md` (all 45). Read **only** `references/types/<type>.md` (+ `references/spec.md`). ## 2. Write the spec Save it to `<settings.outputDir>/<slug>.json`. - **Placement.** `row`/`col` for graph types; you decide layout, the renderer geometry. Related nodes adjacent. - **Labels.** Nodes 1–3 words, `sub` = tech, edges 1–2. - **Focus.** 1–2 `focal` nodes and `"primary"` edges for the main path; nothing else accented. - **Budget.** ≤ 9 nodes / 12 edges, else split. - **Motion.** `auto` (default) or `none`, `reveal`, `trace`, `step`, `loop`. - **Watermark.** Keep the logo; if asked: `"watermark":false` (always: `SC config set watermark false`). ## 3. Render, fix, repeat Run `SC render <spec.json>`. - `ok:true`: done.