visual-explainer

Generate self-contained HTML pages with Mermaid diagrams and styled tables.

Updated Jan 31, 2026

Search Tags:#html #mermaid #dashboard #visualization #slides #diagrams

Ready to run

npx skills add https://github.com/Clinscott/CStar --skill visual-explainer-clinscott

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/Clinscott/CStar/tree/main/skills_db/visual-explainer
Command: npx skills add https://github.com/Clinscott/CStar --skill visual-explainer-clinscott

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.

Core Features & Use Cases

Generate self-contained HTML pages that render diagrams (Mermaid), architecture overviews, diff reviews, plan reviews, project recaps, and data tables.
Proactively render complex ASCII tables (4+ rows or 3+ columns) as HTML to improve readability in the browser.
Create slides, dashboards, and data views with consistent typography, theming, and responsive layouts.

Quick Start

Generate an HTML diagram for the current architecture.

Frequently Asked Questions about visual-explainer

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

FAQPage Schema

How do I generate an HTML architecture diagram from code or text?▼

To generate an HTML architecture diagram, this Skill converts your text descriptions into self-contained HTML pages using Mermaid, rendering diagrams, overviews, and plans directly in the browser without external dependencies.

What is the best way to visualize complex ASCII tables in the browser?▼

The best way to visualize complex ASCII tables is to render them as styled HTML pages. This Skill proactively converts tables with 4+ rows or 3+ columns into responsive CSS-based HTML layouts for improved readability.

Can I create an interactive slide deck or dashboard from a single HTML file?▼

Yes, you can create an interactive slide deck or dashboard from a single HTML file. The Skill produces self-contained HTML pages with optional slide decks, consistent theming, and CSS-based layouts.

How do I review code diffs visually without leaving the browser?▼

You can review code diffs visually by generating a self-contained HTML page. The Skill processes diff reviews and project recaps, presenting them as styled HTML layouts rendered entirely in the browser.

Does this HTML visualization approach support Mermaid diagrams and data tables together?▼

Yes, this HTML visualization approach supports Mermaid diagrams and data tables together. It generates single-file HTML pages that combine Mermaid for diagrams with CSS-based layouts for tables, plans, and recaps.

When should I not use self-contained HTML pages for visual explanations?▼

You should not use self-contained HTML pages when you need dynamic server-side data fetching or live external dependencies, as the Skill outputs single-file HTML pages designed for static browser rendering.