agentsclimarketplace
Sign in

Html diagram

Skill plannotator/effective-html/skills/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.From its SKILL.md

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

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

2.6 KB, as published. Nobody here has run it

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 intentionally broad canvases in a contained pan or scroll region.
  • Use legends only when notation is not self-explanatory.

Add sequencing, filtering, path tracing, pan and zoom, or animation only when it helps answer the stated question. Keep overlays dismissible, controls keyboard-accessible, and motion compatible with prefers-reduced-motion.

When design-artifact is available, read it for the diagram's surrounding composition and visual register. Keep the chosen diagram grammar, label legibility, and relationships authoritative over decorative treatment.

Build and verify

Deliver one self-contained HTML file with essential CSS and JavaScript inline. Require no build step or external service. Use accessible text alternatives and keep important meaning available without animation or color alone.

Inspect the result at wide and narrow widths. Check label collisions, clipped nodes, edge routing, reading order, keyboard operation, overflow, and every interactive state.

Return the absolute path, the diagram form chosen, and the main simplifications or assumptions.

What ships with it: 1 file

260 B alongside SKILL.md

agents/

Gives 0 of the 12 instructions most diagrams charts skills give

Counted across 397 of the 418 authors here whose files we hold, read 2026-09-06

  • Quote labels containing special charactersin 18 of 397, across 17 files
  • Choose the right diagram type for the datain 15 of 397, across 13 files
  • Create a detailed Mermaid diagramin 12 of 397, across 11 files
  • Validate Mermaid syntax before outputin 11 of 397, across 9 files
  • Wrap diagrams in fenced Mermaid code blocksin 11 of 397
  • Read the reference file for the chosen diagram typein 10 of 397, across 6 files
  • Label every connection descriptivelyin 8 of 397, across 7 files
  • Use stateDiagram-v2 for state diagramsin 7 of 397
  • Declare the diagram type on the first linein 7 of 397
  • Keep one concept per diagramin 7 of 397
  • Cap diagrams at 15 nodes and split over 20in 7 of 397
  • Describe the diagram before generating itin 7 of 397

Said here and by no other author read

  • Choose the rendering method by information and scale
  • Inline essential CSS and JavaScript
  • Require no build step or external service
  • Return the path, chosen form, and assumptions

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 626,474. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.