Live Architecture Diagram: animated system diagrams with Claude Code
Describe the boxes and how data moves between them. The agent writes one JSON config and renders a diagram where packets flow, a log scrolls and counters tick, as an mp4 for X or Xiaohongshu and as a page that loops in any browser.
What you get
- An mp4 ready to postH.264, 30 fps, in 4:5 for X, 3:4 for Xiaohongshu or 1:1.
- A page that loopsOne self-contained HTML file with no network calls. Put it on any site.
- One JSON to editWording, boxes and numbers live in a config the agent can change and re-render.
How we tested itPrompt, model, time, cost and what went wrong
Use the live-panel skill. Make a live architecture panel (terminal-dark, 4:5) of a new-term radar pipeline: four sources (X posts, Hugging Face models, GitHub breakout repos, competitor sitemaps) feed a term extractor, then a trend check, a page-one competition check, a keyword table, and a site builder that ships pages. Side rail triggers: 'budget cap', 'offline guard', 'retry tomorrow'. All numbers are illustrative; label them so. Render out/radar.mp4 and keep the live page as out/radar.html.
- Agent · model
- Claude Code · Opus 5.5
- Time
- 1 min 37 s
- Cost
- $0.40
- Tested
- Oct 18, 2026
Nothing blocked the run: the skill's own frame checker passed on the first render, across 124 sampled moments, and replayed frames matched byte for byte.
Two small flaws in the frames: the log's name column cuts “page-one check” to “page-one c…”, and the side rail's “last advice” area sits empty between triggers. Shorter box names would fix the first.
Questions
Do I need a video or image model?
No. Every frame is drawn in a browser from the JSON config and recorded with ffmpeg. You need Python 3.8+, Chrome or Chromium and ffmpeg; no API key and no network.
Are the numbers in the diagram real?
Only if you give it real ones. The skill marks invented figures as illustrative on screen, as our test did, so a post never passes off made-up numbers as data.
Does it work outside Claude Code?
The author lists Codex and other agents that read SKILL.md. We only ran it in Claude Code. It runs on macOS and Linux; on Windows use WSL.
Can I use the output commercially?
The skill's code is MIT licensed. The bundled codex-agents example recreates another creator's picture; the author asks you to keep that credit if you publish output made from that example.
Credits
Made by ythx-101/live-panel-skill (MIT license, created Oct 3, 2026). We tested version 2ca517f on Oct 18, 2026, wrote this page and keep it current. The look and motion idea come from a clip by @thedelost, as the author credits.