interactive-diagram
CommunityTurn descriptions into interactive HTML diagrams.
AuthorLizardLiang
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Creating technical diagrams usually means wrestling with diagramming apps, retaking screenshots, or settling for static images that can't be explored. This Skill eliminates that friction by generating a single, self-contained HTML file that renders a beautiful, interactive diagram anyone can open, pan, zoom, and click through — no install, no build step, no server required.
Core Features & Use Cases
- Interactive Diagrams: Build explorable system architecture, sequence, and flow diagrams with pan, zoom, drag, and click-to-reveal details — all in one shareable HTML file.
- Platform Posters: Generate polished, slide-ready architecture infographics with capability columns and provider bars, exported as crisp PNG or SVG for decks.
- Smart Layout Guard: A built-in engine automatically resolves overlaps and keeps containers from colliding, so the diagram stays tidy without manual coordinate tweaking.
- Dark Mode & Export: Switch between light and dark themes, then download the current view as SVG or 2× PNG for documentation or presentations.
Quick Start
Use the interactive-diagram skill to visualize my system architecture as an interactive HTML diagram.
Dependency Matrix
Required Modules
None requiredComponents
scriptsassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: interactive-diagram Download link: https://github.com/LizardLiang/interactive-diagram/archive/main.zip#interactive-diagram Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 537,000+ vetted skills library on demand.