What is this?
live-panel turns a single JSON config describing a system into an animated architecture diagram - either a terminal-style dark panel or a light-pastel infographic - with packets flowing along wires, a scrolling log, counters and triggers lighting up. It renders to an H.264 mp4 (ready for X/Xiaohongshu) or a live web page, and also ships as a Claude Code SKILL.md.
live-panel turns a single JSON config describing a system into an animated architecture diagram - either a terminal-style dark panel or a light-pastel infographic - with packets flowing along wires, a scrolling log, counters and triggers lighting up. It renders to an H.264 mp4 (ready for X/Xiaohongshu) or a live web page, and also ships as a Claude Code SKILL.md.Is this a CLI tool, a web page generator, or a Claude Code skill?All three: a Python script (scripts/render.py) renders your JSON config to an mp4, the same config can be opened as a live web page, and the repo includes a SKILL.md so Claude Code can run it as a skill.
All three: a Python script (scripts/render.py) renders your JSON config to an mp4, the same config can be opened as a live web page, and the repo includes a SKILL.md so Claude Code can run it as a skill.How do I generate a diagram from my config?Run scripts/render.py against your JSON config to produce the mp4, then verify the output with scripts/checkframes.py, which samples frames and flags layout problems.
Run scripts/render.py against your JSON config to produce the mp4, then verify the output with scripts/checkframes.py, which samples frames and flags layout problems.What do I need installed to render the videos?You need Python 3, Chrome, and ffmpeg (self-tested on Chrome 154 and ffmpeg 7.1); for the exact look in the examples you should also install JetBrains Mono and Noto CJK fonts.
You need Python 3, Chrome, and ffmpeg (self-tested on Chrome 154 and ffmpeg 7.1); for the exact look in the examples you should also install JetBrains Mono and Noto CJK fonts.How closely does the Codex example match the original clip it recreates?Very close but not pixel-identical: the original uses a slab-like monospace font versus JetBrains Mono here, its trigger arrows are solid where this repo's are dashed, and some log wording/timing was estimated by eye from low-fps frames so sequences differ slightly.
Very close but not pixel-identical: the original uses a slab-like monospace font versus JetBrains Mono here, its trigger arrows are solid where this repo's are dashed, and some log wording/timing was estimated by eye from low-fps frames so sequences differ slightly.Can I freely reuse the example diagrams shown in the repo?The code is MIT licensed, but the example diagrams are credit-bearing recreations of other people's designs (by @thedelost and 小红书 @林纾) and are explicitly not covered by the MIT grant.
The code is MIT licensed, but the example diagrams are credit-bearing recreations of other people's designs (by @thedelost and 小红书 @林纾) and are explicitly not covered by the MIT grant.What visual themes and canvas sizes are available?Two themes via theme.preset: terminal-dark and light-pastel. Canvas size is set via canvas.preset with options like 4:5 (1200x1500), 3:4 (1080x1440) and 1:1 (1080x1080); switching aspect ratio needs its own config since coordinates are in canvas pixels.
Two themes via theme.preset: terminal-dark and light-pastel. Canvas size is set via canvas.preset with options like 4:5 (1200x1500), 3:4 (1080x1440) and 1:1 (1080x1080); switching aspect ratio needs its own config since coordinates are in canvas pixels.Is the rendered output deterministic?Yes. Re-rendering the Codex example twice produced byte-identical decoded frames for all 900 frames, verified by comparing ffmpeg framemd5 hashes.
Yes. Re-rendering the Codex example twice produced byte-identical decoded frames for all 900 frames, verified by comparing ffmpeg framemd5 hashes.Where do the example designs in the repo come from?They're credited recreations: the Codex agent-tree panel style comes from a clip by @thedelost, the AI Agent architecture infographic is re-animated from a Xiaohongshu post by @林纾, and the Airbnb example visualizes figures Airbnb leaders stated publicly in a Latent.Space interview.
They're credited recreations: the Codex agent-tree panel style comes from a clip by @thedelost, the AI Agent architecture infographic is re-animated from a Xiaohongshu post by @林纾, and the Airbnb example visualizes figures Airbnb leaders stated publicly in a Latent.Space interview.How does checkframes.py catch broken layouts?It samples roughly 120 time points per render and checks element positions; it has already caught a real bug where a log's time column overlapped the next column in the Airbnb example.
It samples roughly 120 time points per render and checks element positions; it has already caught a real bug where a log's time column overlapped the next column in the Airbnb example.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, motion-graphics, xiaohongshu, diagram, claude-skill, chrome, architecture, visualization, claude-skills, ffmpeg, browser-automation
diagrams-as-code, architecture-diagram, motion-graphics, xiaohongshu, diagram, claude-skill, chrome, architecture, visualization, claude-skills, ffmpeg, browser-automation