Skip to content
Get packs

Guide · Open source

How to use visual-explainer: install and generate HTML diagrams

Updated · written with AI from the project's own documentation and checked against our catalogue data

visual-explainer is an agent skill for AI coding agents. Instead of printing ASCII diagrams or text tables in your terminal, it generates a self-contained HTML page and opens it in your browser. This guide covers who it suits, how to install it for a supported agent host, and how to ask for a page.

visual-explainernicobailon/visual-explainer · ★ 10.7k · MIT

Quick start

  1. 1Pick your agent host. Choose a supported host such as Claude Code, Pi, Cursor or Codex CLI.
  2. 2Install the skill. Run the install command for your host, such as the Claude Code marketplace commands or pi install from GitHub.
  3. 3Ask for a visual. Request a diagram, diff review or plan review in plain language or with a slash command.
  4. 4Open the generated page. The skill produces a self-contained HTML page and opens it in your browser.

Who should use visual-explainer?

It is aimed at developers who already use a coding agent and find ASCII diagrams or terminal tables hard to read. Typical uses include architecture diagrams, diff reviews, plan-versus-requirements comparisons and project recaps.

It does not help if you do not use an AI coding agent, because the tool is a skill that runs inside one.

What you need before installing

You need a supported AI coding agent host. The README names Claude Code, Pi, Cursor and Codex CLI, among others. You also need a web browser to view the generated pages.

Install visual-explainer in Claude Code

In Claude Code, add the marketplace first, then install the plugin from it.

/plugin marketplace add nicobailon/visual-explainer /plugin install visual-explainer@visual-explainer-marketplace

Install visual-explainer in Pi

For Pi, the README gives a command to install directly from GitHub. You can also clone the repository with a shallow depth and install from the local checkout.

  • Install from GitHub with the command shown in the code block.
  • Or clone the repository and run pi install against the local folder.
pi install git:github.com/nicobailon/visual-explainer

Generate your first page

Ask your agent in plain language to draw or review something. The README's examples are a request to draw a diagram of an authentication flow, and the slash commands /diff-review and /plan-review with a plan file path.

The skill writes a self-contained HTML file and opens it in your browser, so you can read it rather than scroll through terminal output.

> draw a diagram of our authentication flow > /diff-review > /plan-review ~/docs/refactor-plan.md

Know the output formats and their limits

HTML is the main format. The README describes PPTX export as a best-effort utility for simple slide decks, with HTML remaining the source of truth. Video export needs ffmpeg, Chrome and playwright-core installed separately.

  • HTML pages: the primary output, viewed in a browser.
  • PPTX: best-effort conversion of simple HTML slide decks.
  • Video: requires separately installed ffmpeg, Chrome and playwright-core.

What people use it for

  • Drawing an architecture or authentication flow diagram instead of ASCII art.
  • Reviewing a large diff in a readable page using /diff-review.
  • Comparing many requirements against a plan using /plan-review.
  • Keeping a readable HTML record of an agent's analysis.

Frequently asked questions

Is visual-explainer free?

The repository is licensed under MIT, as shown in the README badge and project metadata. The MIT licence is the source for licence terms; check the LICENSE file in the repository for the full text.

What do I need to run visual-explainer?

You need a supported AI coding agent host, such as Claude Code, Pi, Cursor or Codex CLI, and a web browser to view the generated pages. Video export additionally needs ffmpeg, Chrome and playwright-core installed separately.

How do I install visual-explainer in Claude Code?

Run /plugin marketplace add nicobailon/visual-explainer, then /plugin install visual-explainer@visual-explainer-marketplace. The README notes that Claude Code namespaces commands as /visual-explainer:command-name.

Does visual-explainer work offline?

The README does not describe how the agent's own model access is handled, so it does not confirm an offline pipeline. Normal skill use needs no build step and no dependency beyond a browser.

Can visual-explainer export PowerPoint or video?

PPTX export is a best-effort utility for simple HTML slide decks, and HTML stays the source of truth. Video export writes a video deck and records it to a 1080p MP4 using locally installed tools.

What is an alternative to ASCII diagrams from a coding agent?

The README's point is that agents default to ASCII art and text tables, which become hard to read beyond simple cases. visual-explainer is the approach this project takes, generating an HTML page instead. The source lists no comparable projects.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

visual-explainer suits developers who use an AI coding agent and want diagrams, diff reviews and plan comparisons as readable browser pages. Skip it if you do not use a supported agent host, need a fully offline pipeline, or need PPTX or video as your main output.

Install options & downloads