Что это?
live-panel превращает один JSON-конфиг, описывающий систему, в анимированную диаграмму архитектуры — тёмную панель в стиле терминала или светлую пастельную инфографику — с пакетами, бегущими по проводам, прокручивающимся логом, счётчиками и загорающимися триггерами. Он рендерит в mp4 H.264 (готово для X/Xiaohongshu) или живую веб-страницу, а также поставляется как SKILL.md для Claude Code.
live-panel превращает один JSON-конфиг, описывающий систему, в анимированную диаграмму архитектуры — тёмную панель в стиле терминала или светлую пастельную инфографику — с пакетами, бегущими по проводам, прокручивающимся логом, счётчиками и загорающимися триггерами. Он рендерит в mp4 H.264 (готово для X/Xiaohongshu) или живую веб-страницу, а также поставляется как SKILL.md для Claude Code.Это CLI-инструмент, генератор веб-страниц или навык Claude Code?Всё сразу: Python-скрипт (scripts/render.py) рендерит вашу JSON-конфигурацию в mp4, тот же конфиг можно открыть как живую веб-страницу, а в репозитории есть SKILL.md, чтобы Claude Code мог запускать его как навык.
Всё сразу: Python-скрипт (scripts/render.py) рендерит вашу JSON-конфигурацию в mp4, тот же конфиг можно открыть как живую веб-страницу, а в репозитории есть SKILL.md, чтобы Claude Code мог запускать его как навык.Как сгенерировать диаграмму из своего конфига?Запустите scripts/render.py на своей JSON-конфигурации, чтобы получить mp4, затем проверьте вывод через scripts/checkframes.py, который сэмплирует кадры и помечает проблемы вёрстки.
Запустите scripts/render.py на своей JSON-конфигурации, чтобы получить mp4, затем проверьте вывод через scripts/checkframes.py, который сэмплирует кадры и помечает проблемы вёрстки.Что нужно установить для рендера видео?Нужны Python 3, Chrome и ffmpeg (проверено автором на Chrome 154 и ffmpeg 7.1); для точного вида, как в примерах, также установите шрифты JetBrains Mono и Noto CJK.
Нужны Python 3, Chrome и ffmpeg (проверено автором на Chrome 154 и ffmpeg 7.1); для точного вида, как в примерах, также установите шрифты JetBrains Mono и Noto CJK.Насколько близко пример Codex совпадает с оригинальным клипом, который он воссоздаёт?Очень близко, но не пиксель в пиксель: в оригинале моноширинный шрифт в стиле slab, а здесь JetBrains Mono, стрелки триггеров там сплошные, где в этом репозитории пунктирные, а часть формулировок/таймингов лога снята на глаз с кадров низкого fps, поэтому последовательности слегка отличаются.
Очень близко, но не пиксель в пиксель: в оригинале моноширинный шрифт в стиле slab, а здесь JetBrains Mono, стрелки триггеров там сплошные, где в этом репозитории пунктирные, а часть формулировок/таймингов лога снята на глаз с кадров низкого fps, поэтому последовательности слегка отличаются.Можно ли свободно переиспользовать примеры диаграмм из репозитория?Код под лицензией MIT, но примеры диаграмм — воссоздания чужих дизайнов с обязательным указанием авторства (@thedelost и 小红书 @林纾) и явно не покрываются MIT-разрешением.
Код под лицензией MIT, но примеры диаграмм — воссоздания чужих дизайнов с обязательным указанием авторства (@thedelost и 小红书 @林纾) и явно не покрываются MIT-разрешением.Какие визуальные темы и размеры холста доступны?Две темы через theme.preset: terminal-dark и light-pastel. Размер холста задаётся через canvas.preset с вариантами вроде 4:5 (1200x1500), 3:4 (1080x1440) и 1:1 (1080x1080); смена соотношения сторон требует своего конфига, поскольку координаты заданы в пикселях холста.
Две темы через theme.preset: terminal-dark и light-pastel. Размер холста задаётся через canvas.preset с вариантами вроде 4:5 (1200x1500), 3:4 (1080x1440) и 1:1 (1080x1080); смена соотношения сторон требует своего конфига, поскольку координаты заданы в пикселях холста.Детерминирован ли рендер?Да. Повторный рендер примера Codex дважды дал побайтово идентичные декодированные кадры по всем 900 кадрам, что подтверждено сравнением хешей ffmpeg framemd5.
Да. Повторный рендер примера Codex дважды дал побайтово идентичные декодированные кадры по всем 900 кадрам, что подтверждено сравнением хешей ffmpeg framemd5.Откуда взяты примеры дизайнов в репозитории?Это воссоздания с указанием авторства: стиль панели дерева агентов Codex взят из клипа @thedelost, инфографика архитектуры AI Agent переанимирована из поста в Xiaohongshu от @林纾, а пример Airbnb визуализирует цифры, которые руководители Airbnb публично назвали в интервью Latent.Space.
Это воссоздания с указанием авторства: стиль панели дерева агентов Codex взят из клипа @thedelost, инфографика архитектуры AI Agent переанимирована из поста в Xiaohongshu от @林纾, а пример Airbnb визуализирует цифры, которые руководители Airbnb публично назвали в интервью Latent.Space.Как checkframes.py ловит сломанную вёрстку?Он сэмплирует около 120 точек времени на рендер и проверяет позиции элементов; он уже поймал реальный баг, когда колонка времени лога перекрывала следующую колонку в примере Airbnb.
Он сэмплирует около 120 точек времени на рендер и проверяет позиции элементов; он уже поймал реальный баг, когда колонка времени лога перекрывала следующую колонку в примере Airbnb.What are similar projects?onetake, architecture-diagram-generator, archify, drawio-skill, huashu-art-motion, excalidraw-diagram-skill, answer-me-with-html, motion-video-kit
onetake, architecture-diagram-generator, archify, drawio-skill, huashu-art-motion, excalidraw-diagram-skill, answer-me-with-html, motion-video-kitWhich topics is it in?diagrams-as-code, architecture-diagram, diagram, motion-graphics, xiaohongshu, claude-skill, chrome, architecture, visualization, claude-skills, ffmpeg, browser-automation
diagrams-as-code, architecture-diagram, diagram, motion-graphics, xiaohongshu, claude-skill, chrome, architecture, visualization, claude-skills, ffmpeg, browser-automation