Html Diagram
When you need to turn architecture discussions into something visual that actually clicks, this generates a full-screen SVG diagram in a self-contained HTML file. It's built for understanding the stack fast, not burying you in prose. The skill walks through reference examples including a polished architecture demo with clickable nodes and animated request paths, then iterates on a diagram that follows your system. You get dark mode with proper theme variables, pan and zoom that doesn't feel sluggish when you're deep in the canvas, and floating panels that dismiss instead of permanently blocking your view. Best when you want the architecture to speak for itself rather than explaining it in paragraphs.
- skills.sh installs
- 4.4K
- GitHub stars
- 4.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add plannotator/effective-html --skill html-diagram --agent claude-codeInstalls into .claude/skills of the current project.
Files
HTML Diagram
Build the smallest visual model that makes the relationship easier to understand than prose alone. Match the notation and visual language to the user's project and subject. Do not force every topic into the same SVG boxes and arrows.
Choose the right model
Identify the question the reader should answer, then select the form:
- topology for components and connections;
- sequence for ordered messages over time;
- process for steps, branches, and handoffs;
- state for transitions and conditions;
- hierarchy for containment or ownership;
- timeline for change over time;
- matrix for repeated relationships;
- quantitative view when magnitude matters.
Decide what must remain visible together and what can be revealed on demand. Use a simpler form when it carries the same meaning.
Choose the rendering method
Use HTML and CSS, SVG, Canvas, or WebGL according to the information and scale. Do not use SVG merely because the output is a diagram.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/plannotator/effective-html
- Categories
- Frontend Development, Sales & Marketing, Design & UI/UX
- First seen
- Jul 14, 2026
More from plannotator/effective-html
All 3Recommended
More Frontend Development
nextjs-authenticationgiuseppe-trisciuoglio/developer-kitProvides authentication implementation patterns for Next.js 15+ App Router using Auth.js 5 (NextAuth.js). Use when setting up authentication flows, implementing3.9Kskills.sh installsnextjs-deploymentgiuseppe-trisciuoglio/developer-kitProvides comprehensive patterns for deploying Next.js applications to production. Use when configuring Docker containers, setting up GitHub Actions CI/CD pipeli3.8Kskills.sh installs
frontend-testinglanggenius/difyUse when writing or changing Vitest or React Testing Library tests under `web/` or `packages/dify-ui/`, or when the user explicitly requests frontend test strat3.8Kskills.sh installs
author-componentdotnet/skillsCreate or review Blazor components (.razor files) with correct architecture. USE FOR: writing new Blazor components that do NOT involve JavaScript interop, impl3.8Kskills.sh installs
pptx-html-fidelity-auditnexu-io/open-designAudit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-r3.3Kskills.sh installs
react-nativevercel-labs/json-renderReact Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs f3.3Kskills.sh installs