skills.rest
haryelramalho
haryelramalhoCOMMUNITY
Explore all skills by this author →
Website𝕏@haryel_devGitHub

visual-explainer

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

Updated May 28, 2026
Search Tags:#html#mermaid#diagrams#diff-review#plan-review#slide-decks
One-click install
npx skills add https://github.com/haryelramalho/skills --skill visual-explainer-haryelramalho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/haryelramalho/skills/tree/main/skills/community/visual-explainer
Command: npx skills add https://github.com/haryelramalho/skills --skill visual-explainer-haryelramalho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill turns dense technical information into clear, browser-viewable visual pages so people can understand systems, changes, and plans faster.

Core Features & Use Cases

  • Visual system explanations: Create self-contained HTML diagrams and architecture overviews for codebases, workflows, and data flows.
  • Review and planning artifacts: Build diff reviews, plan reviews, project recaps, and decision logs that make changes and trade-offs easy to inspect.
  • Data and documentation views: Render comparisons, audits, tables, dashboards, timelines, and slide decks with strong typography and layout control.

Quick Start

Ask the visual-explainer skill to turn your technical content into a self-contained HTML page and open it in the browser.

Frequently Asked Questions about visual-explainer

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

FAQPage Schema
How do I convert technical documentation into visual HTML diagrams?▼

Generating self-contained HTML pages turns technical documentation into visual diagrams viewable in any browser. It renders system architectures and data flows using optional Mermaid and Chart.js, improving comprehension of codebases and workflows.

Can I generate an architecture diagram from a code diff review?▼

Generating architecture diagrams from code diff reviews is possible by creating browser-viewable HTML pages. These visual artifacts map changes and trade-offs, making code modifications easier to inspect alongside the overall system structure.

What is the best way to create visual project recaps and plan reviews?▼

Creating visual project recaps and plan reviews is best accomplished by rendering them as self-contained HTML pages. This visual format applies strong typography and layout controls to decision logs and timelines, making changes and trade-offs easy to inspect.

Does this approach support dashboards and slide decks without external dependencies?▼

Supporting dashboards and slide decks without external dependencies is possible because the output is self-contained HTML. On-demand scripts handle zoomable diagrams, data tables, and slide layouts natively in the browser using optional Mermaid and Chart.js rendering.

How do I visualize data tables and comparisons in a browser?▼

Visualizing data tables and comparisons in a browser is done by generating HTML pages with on-demand scripts. These self-contained views render audits and dashboards with strong layout control, ensuring data formats are easily inspectable without external tools.

Related Skills

Explore More Software Engineering Skills→
tyler-dot-earthtyler-dot-earth
1

visual-explainer

Generate self-contained HTML pages explaining systems, code changes, plans, and data.

Community
Advanced
LeckyHuangLeckyHuang

cloud-design

Create standalone HTML/CSS/JS visual deliverables without a build step.

Community
Advanced
panaminipanamini

visual-explainer

Generate self-contained HTML visual explanations for technical systems and diffs.

Community
Advanced
pascallammerspascallammers
1

artifacts-builder

Generate interactive, self-contained HTML/JavaScript artifacts for embedding or standalone use.

Community
Basic