html-diagram
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do not activate independently from a general request.
Profile →npx skills add plannotator/effective-html --skill html-diagram --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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. - Keep labels, grouping, direction, and connectors legible before adding interaction. - Use stable node positions when readers must compare states or steps. - Keep edge crossings and ambiguous arrowheads to a minimum. - Put intentio
- Choose the right model
- Choose the rendering method
- Build and verify
What does the html-diagram skill do?
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do not activate independently from a general request.
How do I install it?
Run `npx skills add plannotator/effective-html --skill html-diagram --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From plannotator/effective-html, a repository with 1,576 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.