Can I customize the visual style of the output?

Yes, you can specify various aesthetic directions such as 'Blueprint', 'Neon dashboard', 'Hand-drawn sketch', or 'Editorial broadsheet' to match your project's tone.

Does it support interactive diagram features?

Absolutely. Generated Mermaid diagrams include zoom and pan controls, and pages can include Chart.js for interactive metrics and anime.js for orchestrated animations.

When does the Visual Explainer skill activate?

It activates automatically when you ask for diagrams, architecture views, or visual diffs, and proactively triggers for tables with 4 or more rows or 3 or more columns.

Where are the visualization files stored?

All diagrams are saved as self-contained HTML files in the ~/.agent/diagrams/ directory and are automatically opened in your default web browser for immediate viewing.

Visual Explainer & Diagrammer

Name: Visual Explainer & Diagrammer
Author: jamditis

byjamditis

•

Design Tools

Generates high-quality, interactive HTML visualizations and diagrams for technical architectures, data stories, and editorial workflows.

The Visual Explainer skill transforms complex technical data and workflows into beautiful, self-contained HTML pages. Designed with journalism and academic sensibilities, it replaces standard terminal output or ASCII art with responsive diagrams, interactive Mermaid charts, and professionally styled data tables. It is particularly useful for visualizing system architectures, investigation maps, and editorial pipelines, offering a variety of aesthetic themes from 'monochrome terminal' to 'editorial broadsheet' while ensuring full WCAG accessibility compliance and interactive browser previews.

Key Features

01Proactive HTML table rendering for complex datasets to replace standard terminal ASCII output.

02Multiple aesthetic themes ranging from technical blueprints to high-end magazine feature styles.

03Support for diverse diagram types including Mermaid flowcharts, sequence diagrams, and CSS-based timelines.

0483 GitHub stars

05Interactive visualization features including zoom, pan controls, and staggered fade-in animations.

06Automatic browser previewing of generated visualizations on macOS and Linux systems.

Use Cases

01Creating accessible, high-contrast data dashboards and comparison tables for academic research.

02Visualizing complex system architectures and data flow pipelines during software development.

03Mapping investigation networks, power structures, and editorial workflows for newsroom projects.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jamditis/claude-skills-journalism visual-explainer

For use in Claude.ai and ChatGPT

Download Skill