visual-explainer-openclaw_skill

Overview

This skill generates self-contained, browser-ready HTML pages that visually explain systems, code changes, plans, and data. It produces diagrams, styled tables, slide-like pages, and visual diff/plan reviews and always opens the result in a local browser. When complex tabular data or multi-section visualizations are needed, the output is an accessible, copy-paste-friendly HTML file saved to the workspace directory.

How this skill works

When given a request for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation, the skill chooses an appropriate template and renders a fully styled HTML page. It prefers Mermaid for graphs and flowcharts, semantic HTML tables for data matrices, and CSS+Chart.js for dashboards, embedding assets inline so the page is self-contained. For long or wide tables it proactively generates the HTML page instead of ASCII art, writes it to ~/.openclaw/workspace/diagrams/, and opens it in the browser.

When to use it

• You need an architecture diagram, flowchart, sequence diagram, ER/schema, or state machine.
• A code diff or plan needs a visual comparison and risk assessment.
• You want a polished comparison table, feature matrix, or audit report (4+ rows or 3+ columns triggers HTML).
• Preparing a project recap or handoff page for context switching.
• Generating a slide-style visual brief or implementation plan.
• Converting complex ASCII tables into styled, copyable HTML pages

Best practices

• Pick the viewer and information density first (developer, PM, or exec) and let that drive layout complexity.
• Prefer constrained aesthetics (Blueprint, Editorial, Paper/ink) for consistent, readable output.
• Use Mermaid for topology and flow diagrams; use semantic <table> markup for data-heavy matrices.
• Embed fonts and assets via links and fallbacks; avoid Inter/Roboto/Helvetica as the primary body font.
• For diagrams with many nodes, either increase font/zoom or use a hybrid overview + detailed cards pattern.

Example use cases

• Visual diff review: side-by-side architecture diagrams with annotated risk notes.
• Plan review: implementation timeline with task cards, owners, and risk flags.
• Project recap: mental-model snapshot with component cards, recent changes, and next steps.
• Comparison table: feature matrix exported as a styled HTML table for stakeholder review.
• Slide deck: magazine-quality slide pages exported as single-file HTML for quick sharing.