visual-explainer

Generate self-contained HTML diagrams from textual prompts and open them in the browser.

1|1|Updated Aug 3, 2020

Search Tags:#automation #templates #html #mermaid #visualization #diagram #diff-review

Ready to run

npx skills add https://github.com/lolwierd/dotfiles --skill visual-explainer-lolwierd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/lolwierd/dotfiles/tree/main/ai/dot-agents/skills/visual-explainer
Command: npx skills add https://github.com/lolwierd/dotfiles --skill visual-explainer-lolwierd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Convert complex technical concepts into readable, shareable visuals by generating self-contained HTML diagrams from natural language prompts, always rendering in the browser.

Core Features & Use Cases

Generate architecture diagrams, diff reviews, plan reviews, and data tables as self-contained HTML files that open in a browser.
Proactively render ASCII tables that are 4+ rows or 3+ columns as HTML for improved readability and copy-paste reliability.
Offer multiple templates (architecture.html, mermaid-flowchart.html, data-table.html, slide-deck.html) with light/dark theming and associated references.
Output to ~/.agent/diagrams/ and provide a direct file path for re-use and sharing.

Quick Start

Provide a topic and the skill will generate a self-contained HTML diagram 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

How do I generate HTML diagrams from text prompts?▼

You generate HTML diagrams from text prompts by providing a natural language topic to this tool, which creates a self-contained HTML file and opens it directly in your browser for viewing and sharing.

Can I render Mermaid flowcharts and architecture diagrams as standalone HTML?▼

Yes, you can render Mermaid flowcharts and architecture diagrams as standalone HTML files using built-in templates, which package the visualization and styling into a single document that opens automatically in your browser.

How do I convert large ASCII tables into HTML for better readability?▼

Large ASCII tables are proactively converted into HTML when they exceed four rows or three columns, ensuring improved readability and reliable copy-pasting without manual formatting effort.

Does this tool support light and dark theming for generated visualization files?▼

Yes, the generated visualization files support light and dark theming, allowing you to apply preferred visual styles to architecture diagrams, data tables, and slide decks directly within the self-contained HTML output.

What is the best way to visualize a diff review or plan review in the browser?▼

The best way to visualize diff reviews or plan reviews in the browser is to use this tool to transform the textual review data into a self-contained HTML diagram, which is saved locally and opened immediately.

Where are the generated HTML diagrams saved on my system?▼

The generated HTML diagrams are saved to the ~/.agent/diagrams/ directory, providing a direct file path that allows you to easily re-use, manage, and share the self-contained visualization files.