What types of diagrams can I create with this skill?

You can generate five primary types: Hierarchy Trees for taxonomies, Flow Diagrams for sequences, Network Graphs for relationships, Timelines for events, and Matrices for comparisons.

How do I trigger the visualization process?

Simply use the trigger keywords 'visualize:', 'diagram:', 'map:', or 'chart:' followed by the topic or data you want to transform.

Do I need external software to view the diagrams?

No, the skill generates standalone HTML files containing all necessary CSS and JavaScript, which can be opened in any modern web browser.

Is the output suitable for professional documentation?

Absolutely. The diagrams are professional, interactive, and can be easily embedded into project documentation or shared as portable HTML files.

Can I customize the visual style of the diagrams?

Yes, you can explicitly request themes like 'scifi', 'wabisabi', 'classic', or 'modern', or let the AI automatically select a theme based on your content.

Learning Visualizer

Name: Learning Visualizer
Author: yoshiwatanabe

byyoshiwatanabe

0•

学習とドキュメンテーション

Transforms complex information into interactive diagrams and visual knowledge maps automatically.

Learning Visualizer is a powerful Claude Code skill designed to bridge the gap between text-based documentation and visual understanding. It intelligently analyzes structured data and conceptual relationships to generate one of five specialized diagram types—including flowcharts, hierarchies, and timelines—styled with distinct visual themes like Sci-Fi or Wabi-sabi. By producing standalone, interactive HTML files using industry-standard libraries like D3.js and Mermaid.js, this tool allows developers and learners to explore technical architectures, historical sequences, and complex taxonomies with ease.

主な機能

01Generates 5 core visualization types: Hierarchy, Flow, Network, Timeline, and Matrix

02Context-aware theme selection including Sci-Fi, Wabi-sabi, Classic, and Modern aesthetics

03Produces standalone, interactive HTML files with no external dependencies

04Supports interactive features like hovering, clicking, and filtering for data exploration

05Automated logic mapping that matches content structure to the ideal diagram type

060 GitHub stars

ユースケース

01Mapping out educational curricula and historical timelines for structured learning

02Visualizing complex system architectures or API data flows during development

03Comparing technical specifications or feature sets using interactive comparison matrices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yoshiwatanabe/yw-claude-marketplace learning-visualizer

For use in Claude.ai and ChatGPT

Download Skill