Agent Skills › plannotator/effective-html › html-diagram

html-diagram

GitHub

生成自包含HTML文件，用于可视化系统架构。通过高质量SVG、交互动画及深色模式支持，以全屏幕图表形式直观展示技术栈与请求流程，减少文字描述，帮助用户快速理解架构。

skills/html-diagram/SKILL.md plannotator/effective-html

Trigger Scenarios

用户需要查看系统架构图希望以全屏幕SVG图表展示技术栈需要交互式或动画演示系统行为

Install

npx skills add plannotator/effective-html --skill html-diagram -g -y

More Options

Use without installing

npx skills use plannotator/effective-html@html-diagram

指定 Agent (Claude Code)

npx skills add plannotator/effective-html --skill html-diagram -a claude-code -g -y

安装 repo 全部 skill

npx skills add plannotator/effective-html --all -g -y

预览 repo 内 skill

npx skills add plannotator/effective-html --list

SKILL.md

Frontmatter

{
    "name": "html-diagram",
    "description": "Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram. Use when the user wants a full-screen diagram, wants the output to be light on prose, or wants an HTML artifact that is mostly there to make the architecture click fast.",
    "disable-model-invocation": true
}

HTML Diagram

Review the SVG diagrams used throughout references/html-effectiveness/.

There are a bunch in there, and some of them are focused on architecture and whatnot.

After reviewing them, create an HTML file that is strictly for visualizing the architecture and understanding the stack.

It should not be prose-heavy. It should simplify more into a full-screen diagram and whatnot.

Build a high-quality diagram in SVG. Take your time iterating on the diagram more than anything.

If it makes sense, make the diagram interactive and able to visualize and animate different sequences of system behavior.

Also review references/architecture-example.html — a finished example of this skill done well (full-screen SVG stage, clickable nodes, flow chips that light up and animate request paths).

Always include dark mode: hand-rolled CSS variables on :root / html.dark, a small theme toggle button, localStorage persistence, and an apply-before-paint script in <head> (default to prefers-color-scheme). Style the SVG through CSS classes using those variables — never hard-coded hex inside the SVG — so the diagram follows the theme.