Do I need a server to run the generated files?

No, the files are self-contained and use CDN links for dependencies, meaning they can be opened directly from your local file system.

What diagram types are supported?

It supports all Mermaid.js diagram types, including Entity-Relationship, Class, Sequence, Flowcharts, State, and Architecture diagrams.

How do I view the generated visualizations?

The skill automatically saves the HTML file to your /tmp directory and attempts to open it in your default browser using xdg-open.

Can it analyze my current codebase?

Yes, the skill can read your source files, database migrations, and configurations to generate accurate architectural visualizations.

What layout options are available?

You can choose between Long-page guides, Reveal.js Slideshows, Tabbed Dashboards, or Infographic-style layouts.

HTML Visualization Assistant

Name: HTML Visualization Assistant
Author: sevos

bysevos

•

학습 및 문서화

Generates interactive, standalone HTML documents and diagrams to visualize complex technical concepts, architecture, and workflows.

This skill transforms complex technical concepts, codebase architectures, and business processes into professional, self-contained HTML visualizations. It supports multiple formats including scrollable documentation, Reveal.js slideshows, tabbed dashboards, and infographics, featuring integrated Mermaid.js diagrams with custom pastel themes. Ideal for creating onboarding guides, technical tutorials, and architecture diagrams directly from your source code or documentation, the skill automatically saves files to your temporary directory and opens them in your browser for immediate review.

주요 기능

01Built-in Mermaid.js support for architecture, sequence, and ER diagrams

02Multiple presentation formats including slideshows, dashboards, and infographics

032 GitHub stars

04Self-contained HTML files with CDN dependencies for easy sharing

05Professional pastel-themed visual design with responsive and print-ready layouts

06Automatic code analysis to generate documentation from source files

사용 사례

01Developing educational slideshows for technical presentations or team demos

02Generating visual onboarding guides for new developers joining a project

03Creating interactive architecture diagrams from existing database schemas and models

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sevos/claude-code-marketplace html-visualization

For use in Claude.ai and ChatGPT

Download Skill