Visual Explainer: Turn Terminal Output Into Styled HTML Pages

Visual Explainer is an agent skill that converts complex terminal output into self-contained HTML pages with real typography, dark mode support, and interactive Mermaid diagrams. It solves a specific problem: every coding agent defaults to ASCII art when you ask for a diagram, and the results are unreadable beyond the simplest cases.

The Problem

When you ask a coding agent for an architecture overview, a diff review, or a plan audit, the output comes back as ASCII art diagrams, box-drawing characters, and monospace table formatting. For a three-box flowchart, that is fine. For anything more complex, it turns into an unreadable mess that you would never put in a presentation or share with a team.

Tables are even worse. Ask the agent to compare 15 requirements against a plan and you get a wall of pipes and dashes that wraps and breaks in the terminal.

How It Works

You install it as an agent skill by cloning the repo into your agent's skills directory. For Claude Code, that is ~/.claude/skills/. For Pi, it goes in ~/.pi/agent/skills/. Once installed, you get slash commands like /diff-review, /plan-review, and you can ask for architecture diagrams.

Each command produces a single .html file with real typography, dark/light theme support, and interactive Mermaid diagrams with zoom and pan. No build step required. No dependencies beyond a browser.

The output is meant to be shared. Instead of pasting a garbled ASCII table into Slack, you send a clean HTML file that anyone can open and read.

Key Takeaways

• Visual Explainer converts terminal output (diagrams, tables, diffs) into styled, shareable HTML pages
• Supports dark/light themes and interactive Mermaid diagrams with zoom and pan
• Installs as an agent skill for Claude Code, Pi, and other coding agents
• Each output is a single self-contained HTML file with no external dependencies

Resources

• nicobaillon/visual-explainer on GitHub -- Agent skill that turns terminal output into styled HTML pages