skills.rest
SZoloth
SZolothCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/SZoloth/skill-pack --skill visual-explainer-szoloth
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ivanov-iivanov-i

visual-explainer

Convert terminal outputs into self-contained HTML pages with Mermaid diagrams.

Community
Advanced
luanrodriguesluanrodrigues
2

bee:visual-explainer

Generate self-contained HTML pages for visual explanations using Mermaid and CSS templates.

Community
Advanced
luanmorenommacielluanmorenommaciel
231

visual-explainer

Generates HTML files for technical diagrams, data tables, and slide decks using Markdown and custom CSS.

Community
Advanced
jscraikjscraik
8

visual-explainer

Generate self-contained HTML pages for system diagrams and data tables.

Community
Advanced