By LizardLiang
Build beautiful, interactive technical diagrams (system / architecture / sequence / flow) as a single self-contained HTML file — pure HTML, CSS, and vanilla JS, no build step. Tabbed multi-view, pan / zoom / drag, connected-chain highlight, double-click pin, dark mode (Tokyo Night), overlap auto-fix, and SVG / PNG export.
A Claude skill / plugin that turns a description of a system into a beautiful, interactive diagram — delivered as a single self-contained .html file you open by double-clicking. No frameworks, no build step, no server, no CDN.
System architecture, sequence, and flow diagrams that you can pan, zoom, drag, and explore — with a baked-in layout guard that keeps everything from overlapping.
The shots below are the bundled samples/ai-agent-platform.html — a full AI-agent app (chat UI → gateway → agent core → tools & retrieval → data & model providers) — opened straight in a browser.
| Architecture (light) | Architecture (dark) |
|---|---|
![]() | ![]() |
| Click → details panel + chain highlight | Agent loop tab |
|---|---|
![]() | ![]() |
With the skills CLI (works with Claude Code, Cursor, and other agents):
npx skills add LizardLiang/interactive-diagram
Or as a Claude Code plugin marketplace:
/plugin marketplace add LizardLiang/interactive-diagram
/plugin install interactive-diagram@lizard-skills
Once installed, just ask your agent to "draw a diagram of …" / "visualize this architecture" and the skill triggers automatically.
The skill starts from assets/skeleton.html — a complete, self-contained renderer. You (or the agent) edit only the app config object at the top of the script:
const app = {
title: "My System",
tabs: [
{
id: "system", label: "System", type: "system",
containers: [ { id: "client", label: "Client", orient: "band", color: "#7aa2f7" } ],
blocks: [
{ id: "web", container: "client", type: "client", label: "Web App",
description: "...", tech: ["React"], responsibilities: ["Render UI"] },
],
edges: [ { from: "web", to: "api", label: "HTTPS", style: "sync" } ],
},
],
};
The runtime builds the elements, runs the layout guard, and renders the SVG. See SKILL.md for the full contract and samples/ai-agent-platform.html for a worked, three-tab example.
.
├── SKILL.md # the skill (instructions + contract for the agent)
├── assets/skeleton.html # the self-contained renderer (the starting point)
├── samples/ai-agent-platform.html # worked example: Architecture + Agent loop + Ingestion tabs
└── .claude-plugin/
├── plugin.json # Claude Code plugin manifest
└── marketplace.json # single-plugin marketplace manifest
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub lizardliang/interactive-diagram --plugin interactive-diagramCode review plugin channeling Linus Torvalds - brutally honest, technically precise, zero fluff
Discord remote control for Claude Code — forwards tool permission requests, PreToolUse hooks, and AskUserQuestion hooks to Discord DMs. Approve or deny from your phone using emoji reactions.
Multi-project Discord orchestrator — routes channels to projects via Claude Agent SDK
Multi-agent orchestrator for features, research, and project insights
Taiwan ETF / stock research, buy-sell decisions, and personal holdings tracking. Finds common holdings between ETFs (e.g. 0050 / 0052), recommends what to buy and why with an entry/exit plan from a live quote, records the trades you make, and reviews your holdings to suggest what to sell. Always fetches live data via agent-browser; never guesses or derives prices.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Frontend design skill for UI/UX implementation
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Memory compression system for Claude Code - persist context across sessions
Marketing skills for AI agents — conversion optimization, copywriting, SEO, paid ads, ad creative, and growth
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.