skills.rest
lolwierd
lolwierdCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Software Engineering Skills→
cbbkrd-techcbbkrd-tech

visual-explainer

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

Community
Advanced
regispswregispsw

visual-explainer

Generate self-contained HTML files from text-based diagram specifications using Mermaid.

Community
Advanced
sandalsoftsandalsoft

visual-explainer

Generate self-contained HTML diagrams with Mermaid and CSS styling.

Community
Intermediate
Likas07Likas07

mermaid-diagrams

Generate Mermaid diagrams for class, sequence, flowchart, ERD, and C4 architecture.

Community
Intermediate