skills.rest
MunusCaritatis
MunusCaritatisCOMMUNITY
Explore all skills by this author →
GitHub

visual-explainer

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

Updated Aug 23, 2026
Search Tags:#architecture#html#mermaid#diagram#diff-review#visual
One-click install
npx skills add https://github.com/MunusCaritatis/dbtools --skill visual-explainer-munuscaritatis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/MunusCaritatis/dbtools/tree/main/.skills/visual-explainer
Command: npx skills add https://github.com/MunusCaritatis/dbtools --skill visual-explainer-munuscaritatis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate self-contained HTML pages that visually explain systems, code changes, plans, and data. These pages transform complex terminal outputs (including ASCII diagrams and box-drawing tables) into browser-friendly visual documents that are easy to read and share.

Core Features & Use Cases

  • Generate self-contained HTML pages that visually explain systems, code changes, plans, and data tables.
  • Render diagrams using Mermaid, CSS Grid-based cards, HTML tables, and Chart.js, with optional slide deck output.
  • Automatically convert complex ASCII tables (4+ rows or 3+ columns) into styled HTML pages and present them with a narrative structure.

Quick Start

Ask the skill to render a visual HTML page from your diagram, diff, plan, or data table.

Frequently Asked Questions about visual-explainer

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

FAQPage Schema
How do I convert complex terminal output into readable HTML?▼

To convert complex terminal output into readable HTML, you can generate self-contained browser-ready pages that transform ASCII diagrams, box-drawing tables, and code diffs into styled visual documents using Mermaid, CSS Grid, and HTML tables.

Can I render Mermaid diagrams and architecture overviews in a self-contained HTML page?▼

Yes, you can render Mermaid diagrams and architecture overviews in a self-contained HTML page. The output leverages Mermaid alongside CSS Grid-based cards and Chart.js to produce browser-ready visual documents without external dependencies.

What is the best way to visually explain code diffs and plan reviews?▼

Visually explaining code diffs and plan reviews is best handled by transforming terminal text into structured HTML pages. This converts diff outputs and plans into narrative visual documents using styled grids and diagrams for clear sharing.

How do I turn ASCII tables into styled HTML without manual formatting?▼

To turn ASCII tables into styled HTML without manual formatting, automatically convert complex ASCII tables featuring 4+ rows or 3+ columns into styled HTML pages. This presents the data with a narrative structure using CSS Grid and HTML tables.

Does visual explainer support slide deck output for project recaps?▼

Yes, visual explainer supports optional slide deck output for project recaps. It generates self-contained HTML pages that visually explain systems and data, leveraging slides alongside styled grids and charts for browser-ready presentation artifacts.

Are there limitations when converting large terminal outputs into HTML diagrams?▼

Limitations when converting large terminal outputs into HTML diagrams depend on browser rendering capacity for self-contained pages using CSS Grid and Mermaid. The conversion targets ASCII tables with 4+ rows or 3+ columns and complex box-drawing structures.

Related Skills

Explore More Software Engineering Skills→
hidonguyenhidonguyen

ck:preview

Generate self-contained HTML visual previews and diagrams for files and directories.

Community
Advanced
haryelramalhoharyelramalho

visual-explainer

Generate self-contained HTML pages with Mermaid and Chart.js diagrams.

Community
Advanced
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
diegopetruccidiegopetrucci
21

visual-explainer

Generate self-contained HTML visual explanations for systems and code changes.

Community
Intermediate