--- title: "Tinycharts by April Zhu — AI video generator workflow for explainers" description: "Hand-drawn diagrams of how things work that you can play: a real statechart behind every button, nine chart types. Install in Claude Code, Codex and Grok with one command." url: https://varg.ai/how-to/skills/tinycharts updated: 2026-11-05 --- # Tinycharts by April Zhu — workflow skill for explainers > **For AI agents:** find the right skill in one call — `curl -s "https://varg.ai/how-to/api/search?q="` returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the how-to page. From a terminal: `curl -fsSL https://varg.ai/install | sh` installs the vargai CLI (https://varg.ai/how-to/cli.md): `vargai search` and `vargai install ` with no key, every varg model after `vargai login`. Hand-drawn diagrams of how things work that you can play: a real statechart behind every button, nine chart types. - **Type:** [Workflow](https://varg.ai/how-to/workflows.md) · [Explainers](https://varg.ai/how-to/browse/skills/explainers.md) - **Slug:** `tinycharts` - **Status:** live - **Publisher:** April Zhu (community) - **License:** April Zhu: free for personal, non-commercial use, no redistribution; pen, pencil tile and doll adapted from statechart-art (MIT) - **Source:** https://april-zhu.com/tinycharts - **Works in:** Claude Code - **Requires:** Claude Code (or Claude.ai with skills: upload tinycharts.skill from the author's page), Python 3 (build.py, standard library only), Node 18+ to run the rule check, Optional: npm i pele, for the flow chart in the logic panel, A browser to open the page - **Cost:** Free: no API calls, no credits. Everything runs locally and the page works offline apart from Google Fonts. - **Runtime:** one sheet is written and built by the agent in a few minutes; build.py itself takes about a second ## What it does April Zhu's free Tinycharts skill (https://april-zhu.com/tinycharts) turns a process or a place ("how a letter gets delivered", "a cat's day", "what's under the street") into one interactive HTML page: a 1400 × 1400 hand-drawn sheet in a marker-and-pencil isometric look, up to four buttons and a status line. Behind the picture is a real statechart, written as Mermaid stateDiagram-v2: the states are named parts of the drawing, the buttons are its events, and a press the statechart does not allow is refused with a one-line reason. The agent picks one of nine types (flowchart, flow machine, comic strip, timeline, clock, exploded view, annotated scene, game board, catalogue) from the shape of the question, draws it with the bundled kit (pen, marker washes, isometric boxes, people, animals, plants), then writes a small breadth-first check that searches every reachable state, proves two or three rules, and takes each guard away to show the shortest path that breaks the rule. build.py wraps it into one page; --logic adds a panel with the rules and the statechart drawn as a flow chart (via Obsidian's pele). The output is a playable web page, not an MP4: screen-record it or use it as a plate in an explainer. Free for personal, non-commercial use; Tinycharts Pro ($34.90 at april-zhu.com/shop) adds 28 chart types, templates, Chinese charts and a commercial licence. ## Use when - Show how something works, happens or changes as a picture you can click through: a letter's journey, a cat's day, bean to cup - An explainer illustration with a hand-drawn, isometric, marker-and-pencil look instead of boxes and arrows - A process with branches, loops or guards where the rules should be checked, not just drawn - A still or screen-recorded plate for an explainer video about a warm, everyday subject ## Not for - A rendered MP4 straight out of the box: the output is an interactive HTML page - Technical systems, crypto or finance: the skill deliberately sticks to plain, warm subjects - Client or commercial work on the free licence (that needs Tinycharts Pro) - Data charts from a CSV (bars, lines, pies): use an animated chart skill ## Install - Claude Code: `mkdir -p ~/.claude/skills && curl -fsSL https://april-zhu.com/tinycharts/tinycharts.tar.gz | tar -xz -C ~/.claude/skills` - Any agent, with the vargai CLI: `vargai install tinycharts` ## Example output https://s3.varg.ai/files/4325c578-378d-4c43-ae53-3cc3218df1ea/file_36a00f48d3ec.mp4 — Four of the nine free chart types, from the author's demo loops: a clock (a cat's day), a comic strip (one letter to Gran), a flowchart (one cup of coffee) and an annotated scene (a small farm). (credit: April Zhu, Tinycharts demo loops, https://april-zhu.com/tinycharts) ## More explainers skills - [HyperFrames](https://varg.ai/how-to/skills/hyperframes.md): Turn HTML, CSS and seekable animation into deterministic MP4s: launch films, explainers, captions, title cards. - [HyperFrames Slideshow](https://varg.ai/how-to/skills/hyperframes-slideshow.md): Build a live, navigable deck with fragment reveals, branching hotspots and presenter notes instead of an MP4. - [Plain-Sight Explainer](https://varg.ai/how-to/skills/hyperframes-vox-explainer.md): 60–90 s collage explainers about everyday things, or mined from your documents and links, with numeric seam checks. - [Remotion Create](https://varg.ai/how-to/skills/remotion-create.md): Scaffold a new Remotion project and lay the video out as clips or scenes before writing any frames. - [Remotion Maps](https://varg.ai/how-to/skills/remotion-maps.md): Animate maps in Remotion: static maps, Mapbox, MapLibre, MapTiler and CesiumJS 3D flyovers. - [Higgsfield Video Explainer](https://varg.ai/how-to/skills/higgsfield-video-explainer.md): Turn a topic or document into a narrated, stylized explainer assembled from 10-second voiced blocks. ## Run the generation on varg varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs. - Any agent with a terminal: `curl -fsSL https://varg.ai/install | sh` (Windows: `irm https://varg.ai/install.ps1 | iex`), then `vargai login` and every model is a command — `vargai generate_video …`, `vargai estimate_cost …` (https://varg.ai/how-to/cli/) - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` (skill + hosted MCP) - Codex, Cursor, Gemini CLI, OpenClaw: `npx skills add vargHQ/skills --skill varg-ai -a -y` - Grok and any agent that reads SKILL.md: `npx skills add vargHQ/skills --skill varg-ai`, or point it at the skill's SKILL.md - Claude.ai, ChatGPT, any MCP client: connect `https://mcp.varg.ai/mcp` - API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt