visual-explainer

Convert terminal outputs and diagrams into self-contained HTML visualizations.

11|1|Updated Mar 3, 2026

Search Tags:#architecture #mermaid #diagram #diff-review #plan-review #html-diagrams

Ready to run

npx skills add https://github.com/SZoloth/skill-pack --skill visual-explainer-szoloth

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/SZoloth/skill-pack/tree/main/skills/visual-explainer
Command: npx skills add https://github.com/SZoloth/skill-pack --skill visual-explainer-szoloth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate self-contained HTML files that visually explain systems, code changes, plans, and data, replacing ASCII diagrams in the terminal with readable, browsable visuals.

Core Features & Use Cases

Create self-contained HTML diagrams for architecture, diffs, plan reviews, project recaps, and data tables.
Proactively render complex tables (4+ rows or 3+ columns) as HTML pages for readability and sharing.
Choose between Mermaid-based topology diagrams, CSS Grid architecture cards, and HTML tables, with optional AI-generated illustrations via surf-cli.

Quick Start

Describe the topic you want diagrammed and the skill will generate a self-contained HTML diagram in ~/.agent/diagrams/ and open it in your browser.

Frequently Asked Questions about visual-explainer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

Can I render complex data tables as HTML pages for better readability?▼

You can visualize plan diffs as HTML diagrams by processing terminal outputs and plan reviews. It generates self-contained HTML visualizations using Mermaid topology diagrams or CSS Grid architecture cards.

Does this tool support Mermaid and CSS Grid for rendering architecture diagrams?▼

Generate self-contained HTML diagrams by providing terminal outputs, architecture plans, or data tables. The tool creates standalone HTML files using Mermaid, CSS Grid, or HTML tables without requiring external dependencies.

How do I generate self-contained HTML diagrams from terminal outputs without external dependencies?▼

Yes, it supports Mermaid-based topology diagrams, CSS Grid architecture cards, and HTML tables for rendering architecture. It also optionally supports AI-generated illustrations via surf-cli for enhanced visual explanations.

Can I render complex data tables as HTML pages for better readability?▼

Proactively render data tables as HTML when dealing with complex tables containing 4 or more rows or 3 or more columns. This replaces unreadable terminal ASCII output with browsable, shareable HTML pages.

When should I proactively render data tables as HTML instead of viewing them in the terminal?▼

Visually explain code changes and plan diffs by converting terminal outputs into self-contained HTML visualizations. It applies Mermaid diagrams and HTML tables to replace ASCII diagrams for readable plan reviews.

What is the best way to visually explain code changes and plan diffs for review?▼

Add AI-generated illustrations to architecture diagrams using the optional surf-cli integration. It enhances self-contained HTML visualizations by generating AI illustrations alongside Mermaid or CSS Grid diagrams.