Visual Explainer fixes the ugliest part of working with coding agents: the output. Ask Claude Code for a diagram and you get ASCII boxes. Ask it to compare 15 requirements and you get a wall of pipes that wraps in the terminal. This skill makes the agent write a self-contained HTML page instead, with real typography, light and dark themes, and Mermaid diagrams you can zoom, and opens it in the browser.
| Author | Nico Bailon |
| Released | February 2026, updated through August 2026 |
| Popularity | About 10,000 GitHub stars |
| Licence | MIT |
| Works with | Claude Code (plugin), Codex CLI, Cursor, OpenCode, Pi, Antigravity CLI, any MCP host |
| Needs | A browser. No build step for normal use |
| Output | ~/.agent/diagrams/<name>.html, optionally a .pptx |
What it does
| Command | Output |
|---|---|
/generate-web-diagram |
An HTML diagram for any topic |
/generate-visual-plan |
A visual implementation plan for a feature |
/generate-slides |
A slide deck |
/diff-review |
A visual code review: what changed, architecture before and after |
/plan-review |
A plan checked against the codebase, with risks |
/project-recap |
A snapshot of a project to get back into it after a break |
/fact-check |
A document checked against the actual code |
The skill also steps in on its own: when the agent is about to print a table of 4+ rows or 3+ columns in the terminal, it renders HTML instead.
- Right tool per content: Mermaid for flowcharts, CSS Grid for architecture overviews, HTML tables for data, Chart.js for dashboards.
- Slides: add
--slidesto any command for a deck instead of a scrolling page, and--pptxfor a PowerPoint export. - Themes: 11 palettes (Dracula, Nord, Tokyo Night, Solarized Light, GitHub Light and others) with an optional live picker for colours and font pairs.
- Quick mode:
--quickmakes the agent produce a small JSON spec that a bundled renderer turns into the page. Faster and more predictable than free-form HTML.
For business people
The problem: AI coding agents explain their work in plain text, in a terminal. A system diagram, a code review or a plan audit is hard to read there, and impossible to share with someone who doesn't live in a terminal.
What it changes: the same explanation arrives as a clean web page or a slide deck. You can read it, send it to a colleague, or put it on a screen in a meeting.
Cost: free and open source.
The limits: the result depends on the model. The PowerPoint export is basic: it keeps text, bullets, tables and code, but drops animations, live diagrams, charts and custom fonts. The HTML is the real output.
For technical people
Install in Claude Code as a marketplace plugin:
/plugin marketplace add nicobailon/visual-explainer
/plugin install visual-explainer@visual-explainer-marketplace
Commands are namespaced in Claude Code, so /visual-explainer:diff-review. Usage:
> draw a diagram of our authentication flow
/visual-explainer:diff-review main..HEAD
/visual-explainer:project-recap --slides 2w
/visual-explainer:generate-web-diagram --quick authentication request flow
- Structure: a
SKILL.mdwith the workflow and design rules, reference files the agent reads before generating (CSS patterns, libraries, slide patterns, themes, a sticky table of contents for long pages), and 4 HTML templates. - MCP server:
visual-explainer-mcpis a local stdio server with 3 tools (prepare, render HTML, render quick). It calls no LLM, opens no port, and only writes inside its output folder, set withVISUAL_EXPLAINER_OUTPUT_DIR. - Defaults per project:
visual-explainer.config.mdsets the starting theme and font. Personal overrides go in.claude/visual-explainer.local.md. - Gotchas: Mermaid diagrams need a page refresh after an OS theme switch, and auto-opening the browser depends on the harness and its sandbox.
Value
Most of what my agents produce for me ends up as HTML anyway: dashboards, battlecards, comparison pages. The difference here is the trigger. The skill catches the moment an agent is about to dump a big table or an ASCII diagram in the terminal, and turns it into a page I can actually read.
The 2 commands I'd use most are /project-recap, to get back into a lab project after weeks away, and /plan-review, to check a plan against the code before letting an agent build it. For anything that leaves my machine, I'd still apply my own design system rather than the bundled palettes.
Further Reading