live-panel, animated architecture diagrams from a single JSON file

What live-panel turns a JSON config into

live-panel is an open source agent skill and renderer that turns one JSON config into an animated architecture diagram. The output is either a terminal-style live panel or a light pastel infographic, rendered to an H.264 mp4 or a self-contained web page that loops live in any browser.

The input is a single JSON file describing boxes, wires, packet paths, log wording and counters. The README is emphatic that the HTML template never needs editing, so the entire visual is data. Everything the renderer draws comes from elements in that file: boxes with positions, sizes and colours, lines between coordinates, flows along a path, a log panel with columns, and text runs.

The visual idea is a fixed layout that looks alive. The README describes packets flowing along the wires, a log that scrolls, counters that tick, bars that flip state and side triggers that light up in turn. Nothing moves in the layout itself, which is what makes the result usable as a diagram rather than an animation that loses its structure after two seconds.

The intended uses are specific: agent architecture diagrams, multi-agent and agent-tree panels, system and data-flow diagrams, and monitoring dashboard style posts. The canvas presets are chosen for social platforms, with 4:5 at 1200x1500 for X, 3:4 at 1080x1440 for Xiaohongshu and 1:1 at 1080x1080 as a square default.

Machine types and element types in the config schema

The schema separates the scene graph from the behaviour. Elements carry geometry and appearance, while a machines object holds the state that changes over time.

Two machine types appear in the minimal example. A counter has a start value, a rate and a format, which is how the request counter on the panel ticks upward during the loop. A lane has a period, a run duration, an off interval, a busy label and a list of done states, plus an optional log with a who field, a colour class and a list of message pairs. A lane is how a box is shown as working for a while and then idle, with a line appended to the log when it finishes.

The element types are just as small. A text element places runs of text with a colour class and a bold flag. A box places a bordered rectangle with padding and a list of lines, where each line is either literal text or a mix of literal runs and references to machine values, which is how a live counter is printed inside a box. A line connects two points. A flow animates packets along a path with a period and per-packet offsets so several packets can be in flight with a stagger. A log draws a titled table with columns positioned by x offset.

The result is a compact vocabulary. There is no animation timeline in the config, no keyframe system and no script hook, so a diagram cannot express arbitrary motion. What it can express is a repeating operational picture, which is exactly the shape of the architecture posts it targets.

Rendering a first diagram and checking the frames

The quick start is a clone and two commands. Requirements are Python 3.8 or newer using only the standard library, Chrome or Chromium, and ffmpeg. There is no API key, no network access and no pip package to install.

git clone https://github.com/ythx-101/live-panel-skill && cd live-panel-skill
python3 scripts/render.py --config examples/minimal/config.json --out minimal.mp4 --html-out minimal.html
python3 scripts/check_frames.py --config examples/minimal/config.json --out-dir frames --repeat

The first command produces both outputs at once: the mp4 with the --out flag and the standalone HTML page with the --html-out flag. The mp4 is H.264 at 30 fps with a silent AAC track, and the README explains why the silent track matters: chat apps treat a video without an audio track as a GIF, which changes how it is displayed.

The second command is the part worth copying into a workflow. scripts/check_frames.py renders frames to a directory and checks them for overflow and overlap, and the --repeat flag verifies that a replay is identical. The README annotates the expected exit code as zero meaning no overflow or overlap and a repeatable replay. That check turns a diagram from something you eyeball into something with a pass or fail result.

The repository also carries an examples/ directory with several configurations, including a minimal one, an agent architecture version, a recreation of an agent tree, an Airbnb themed one, and funnel and ring layouts. Each example folder holds its config and, for the recorded ones, a preview and a full-size mp4.

Platform limits and the credit position the README takes

The first limitation is the platform. The README states that the supported platforms are Linux and macOS, and that Windows is not supported natively because Chrome is driven over a DevTools protocol. On macOS the browser is found automatically under /Applications, covering Google Chrome, Chromium, Edge and Brave, and the --chrome flag overrides the choice. Any team that has to produce diagrams on Windows has no path in the tool as it stands.

The second limitation is the rendering model. A fixed layout with a small vocabulary produces diagrams that look like monitoring panels. If your architecture needs irregular placement, freeform arrows, or a visual that changes shape rather than animating within a fixed structure, the schema will not express it, and the HTML template is explicitly not something you are meant to edit.

The credit section deserves a close read before anyone publishes output from this tool. The look and motion grammar come from an architecture diagram clip by a named author, spread via a quote post by another. One example is described as a recreation of that original picture, redrawn from frame captures, and the README states that the design belongs to the original author while the method is re-implemented here and is not their code. Another example re-animates a static infographic whose wording and colours follow the original, and the video footer says so. The third example visualises figures stated in a podcast interview, with the README noting that the animation counters are illustrative. None of these designs belong to the repository, and the icons are credited to Lucide under the ISC licence.

The SKILL.md side and how this differs from hand-editing a video

The repository ships a SKILL.md at its root, and the README explains why: it makes the project a skill for Claude Code, Codex and other agents that read SKILL.md. The agent writes the JSON, renders it and checks the frames itself.

That framing is the real differentiator against a manual workflow. In a hand-edited video, the diagram is a drawing that someone edits and a motion designer animates, so a change to the numbers means redrawing. Here the diagram is a data structure, so a change to a number or a log line is a JSON edit followed by a render, and a frame check that catches overflow before publishing.

The cost of that model is the schema. Because the renderer only understands boxes, lines, flows, logs, text and machines, the agent has to express what it wants inside that vocabulary, and the examples in the repository are effectively the documentation of what is expressible. An agent that has read SKILL.md will produce something in that shape; the examples directory is what makes that shape legible.

On maintenance, the repository is not archived and the last push was on 2026-10-14, with no GitHub releases published, so there is no versioned artefact to pin. The licence field on the repository says MIT, and the README states that the code is MIT licensed. The repository also carries a NOTICE file, a CITATION.cff and an llms.txt file, which is a sign that the project is intended to be consumed by language models as much as by people.

Editorial conclusion

Adopt live-panel if your team publishes architecture explainers as video or looping pages and wants the diagram to be defined as data rather than hand-drawn frames. Skip it if Windows support is a requirement, because the README states Chrome is driven over a DevTools protocol that keeps the tool Linux and macOS only. Verify first by running scripts/render.py against examples/minimal/config.json, then scripts/check_frames.py with the --repeat flag to confirm there is no overflow or overlap and that a replay is identical.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. README
4. ythx-101/live-panel-skill on GitHub