visual-explainer
Turns an AI coding agent's terminal output into styled HTML pages for diagrams, diff reviews and plan audits.
- Stars
- 10.7k
- Forks
- 690
- Licence
- MIT
- Language
- JavaScript
- Last update
- 7 days ago
- Type
- AI model / agent
What it is
This is a skill for AI coding agents that, instead of printing ASCII diagrams or text tables in the terminal, generates a self-contained HTML page and opens it in your browser. It is aimed at things like architecture diagrams, diff reviews, plan-versus-requirements comparisons and project recaps. The README says it works with many agent hosts, including Claude Code, Pi, Cursor and Codex CLI.
- Ask the agent to draw an authentication flow and view it as an HTML diagram
- Run the /diff-review command to get a styled review of changes
- Run /plan-review on a markdown plan file to audit it
- Step through a state machine one event at a time using the example replay page
Great for
- Developers who use a coding agent and find ASCII diagrams or terminal tables hard to read
- Reviewing a large diff or comparing many requirements against a plan
- Explaining a system architecture or flow to teammates
- Anyone who wants a readable record of an agent's analysis as a page
Not ideal for
- People who do not use an AI coding agent, since the tool is a skill that runs inside one
- Users who need a fully offline pipeline, because the README does not describe how the agent's own model access is handled
- Teams needing PPTX or video output as a primary format, since the README describes those as best-effort or requiring extra tools
How to get it
- 1
See the README
You'll need: A supported AI coding agent host (e.g. Claude Code, Pi, Cursor, Codex CLI) · A web browser to view the generated pages
Claude Code: add marketplace
/plugin marketplace add nicobailon/visual-explainerClaude Code: install plugin
/plugin install visual-explainer@visual-explainer-marketplacePi: install from GitHub
pi install git:github.com/nicobailon/visual-explainer - 2
Run it
- Install the skill in your agent host using the command for that host
- In your agent, ask for a diagram or run a command such as /diff-review
- Open the generated HTML page in your browser to read it
- 3
Get the most out of it
- Use the MCP server (visual-explainer-mcp) to expose prepare and render tools to hosts that support MCP
- Set VISUAL_EXPLAINER_OUTPUT_DIR to choose where rendered pages are written
- Use viewer: "auto" in the Pi render action to try Glimpse and fall back to the browser
- Use /generate-video or the PPTX utility if you need slide or video output, after installing their listed requirements
Downloads
Strengths
- Produces readable typography, dark and light themes, and diagrams instead of ASCII art
- Output is a self-contained HTML file that needs only a browser, with no build step for normal use
- Supports many agent hosts and has an MIT license
Trade-offs
- Output quality depends on which agent and model drives the skill; the README does not say how that is evaluated
- Optional PPTX and video export need extra tools such as ffmpeg, Chrome and playwright-core, installed separately
- Install steps differ per host and some hosts need manual copying or absolute paths
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.