skills.rest
deriye
deriyeCOMMUNITY
Explore all skills by this author →
GitHub

visual-explainer

Generate self-contained HTML pages with Mermaid diagrams, tables, and slide decks for technical explanations.

Updated Sep 7, 2026
Search Tags:#documentation#html#mermaid#visualization#slide deck#diagram#diff review
One-click install
npx skills add https://github.com/deriye/.agents-work --skill visual-explainer-deriye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/deriye/.agents-work/tree/main/skills/visual-explainer
Command: npx skills add https://github.com/deriye/.agents-work --skill visual-explainer-deriye

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Coding agents default to ASCII art and box-drawing tables when asked for diagrams or comparisons, which become unreadable beyond trivial cases. This Skill replaces terminal output with styled, self-contained HTML pages that open in the browser. ## Core Features & Use Cases - Diagram Generation: Routes content to the right rendering approach — Mermaid for flowcharts, sequence diagrams, ER diagrams, and state machines; CSS Grid for architecture overviews; HTML tables for comparisons; Chart.js for dashboards. - Slide Deck Mode: Produces magazine-quality slide presentations with 10 slide types, keyboard navigation, and curated presets via the --slides flag or /generate-slides command. - Proactive Table Rendering: Automatically converts complex ASCII tables (4+ rows or 3+ columns) into styled HTML pages without being asked. - Use Case: Run /diff-review after a large refactor to get a visual page with architecture comparison, KPI dashboard, code review sections, and a decision log instead of a wall of terminal text. ## Quick Start Ask the agent to draw a diagram of your authentication flow and it will generate a styled HTML page 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 an HTML architecture diagram from a coding agent?▼

Invoke the skill with a request like drawing a diagram of your system, or use the /generate-web-diagram command. The agent picks an aesthetic direction, renders Mermaid or CSS Grid layouts, writes a self-contained HTML file, and opens it in your browser.

What diagram types does Mermaid rendering support here?▼

The skill routes flowcharts, sequence diagrams, data flow diagrams, ER schemas, state machines, and mind maps to Mermaid with custom themeVariables. Architecture overviews use CSS Grid cards, tables use semantic HTML, and dashboards use Chart.js.

Can I generate a slide deck instead of a scrollable page?▼

Yes, pass the --slides flag to commands like /diff-review or /project-recap, or invoke /generate-slides directly. The deck uses 10 slide types with keyboard, touch, and wheel navigation across four curated visual presets.

Does the generated HTML require a build step or dependencies?▼

No build step is required. Each output is a single self-contained HTML file using CDN links for fonts and optional libraries like Mermaid or Chart.js. You only need a browser to view the result.

Why do Mermaid diagrams render too small or break layout?▼

Small rendering is fixed by increasing fontSize in themeVariables or using the SVG viewBox zoom approach documented in the references. Layout breaks occur when page CSS defines a .node class, which collides with Mermaid's internal class — use .ve-card instead.

When should I not use this visual HTML approach?▼

Skip it for simple inline examples in code comments where plain text suffices, and when no browser is available to view output. Complex architectures over 15 elements should use the hybrid pattern rather than one large Mermaid graph.

Related Skills

Explore More Software Engineering Skills→
AppsVortexAppsVortex
31

arn-code-document-project

Generate developer documentation from Arness pipeline artifacts and git diffs.

Official
Advanced
decocmsdecocms
396

slides

Generate editable HTML slide decks from JSON data with live preview.

Official
Advanced
3D-Stories3D-Stories
2

rawgentic:update-docs

Orchestrate a 10-step documentation update workflow with accuracy verification against code.

Official
Advanced
dsynapalosdsynapalos
2

render-drawio-diagram

Create and edit draw.io diagrams from mxGraph XML into SVG files.

Community
Intermediate