Repolode
Submit
nicobailon

nicobailon/visual-explainer

An agent skill that makes coding agents render diagrams, diff reviews, plans and tables as styled HTML pages instead of ASCII art.

View on GitHub
Stars
10,550
Forks
677
Open issues
0
Last commit
4 hours ago

What is it?

visual-explainer is an agent skill for coding assistants such as Claude Code, Codex CLI, Cursor and Pi. When asked to explain architecture, review a diff, or compare requirements against a plan, the agent writes a self-contained HTML page and opens it in the browser, rather than printing ASCII diagrams or wide terminal tables that wrap badly.

The skill provides slash commands for common jobs: generating web diagrams, visual implementation plans, slide decks, narrated MP4 videos, diff reviews, plan checks against the codebase, project recaps, option comparisons and document fact-checks. Pages come in several layout styles and eleven switchable color palettes, and diagrams are hand-drawn inline SVG that can step through a process.

The core skill needs no build step and only a browser. Optional pieces include a local stdio MCP server, a Pi extension tool, and a best-effort PPTX exporter that uses small Node dependencies.

Key features

  • 01Generates self-contained HTML pages for diagrams, tables and reviews instead of ASCII output.
  • 02Provides slash commands for diff review, plan review, project recap, comparisons and slide decks.
  • 03Offers eleven switchable color palettes and several page layout registers.
  • 04Draws hand-made inline SVG diagrams that can step through a process.
  • 05Includes optional MCP server, Pi tool and PPTX export utilities.

Use cases

  • Explaining a system architecture or authentication flow to teammates.
  • Reviewing a large diff or comparing requirements against an implementation plan.
  • Turning a complex comparison table from an agent into a readable page.
  • Creating a slide deck or short narrated video from a codebase or feature.

Quick start

  1. 1

    Add the marketplace in Claude Code

    /plugin marketplace add nicobailon/visual-explainer
  2. 2

    Install the visual-explainer plugin

    /plugin install visual-explainer@visual-explainer-marketplace
  3. 3

    Ask your agent for a diagram or review, and it opens an HTML page in your browser

Things to know

  • Video export needs ffmpeg, Chrome, and playwright-core installed separately.
  • PPTX export is a best-effort utility, and HTML remains the source of truth.

Topics

#agent-skill#html#diagrams#code-review#claude-code#visualization#mcp

FAQ

What is visual-explainer?
An agent skill that makes coding agents render diagrams, diff reviews, plans and tables as styled HTML pages instead of ASCII art. visual-explainer is an agent skill for coding assistants such as Claude Code, Codex CLI, Cursor and Pi. When asked to explain architecture, review a diff, or compare requirements against a plan, the agent writes a self-contained HTML page and opens it in the browser, rather than printing ASCII diagrams or wide terminal tables that wrap badly.
Is visual-explainer free to use? What license does it have?
visual-explainer is open source under the MIT license. Check the license terms before using it in commercial products.
Is visual-explainer still maintained?
Actively maintained. The last commit to visual-explainer was on Oct 20, 2026.
What can I use visual-explainer for?
Explaining a system architecture or authentication flow to teammates. Reviewing a large diff or comparing requirements against an implementation plan. Turning a complex comparison table from an agent into a readable page. Creating a slide deck or short narrated video from a codebase or feature.
How do I install visual-explainer?
Add the marketplace in Claude Code: /plugin marketplace add nicobailon/visual-explainer Install the visual-explainer plugin: /plugin install visual-explainer@visual-explainer-marketplace Ask your agent for a diagram or review, and it opens an HTML page in your browser
Where can I get visual-explainer?
The source code and installation instructions are on GitHub: https://github.com/nicobailon/visual-explainer

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects