Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

html-diagram — Claude Code skill: what it does, how to install

Generates standalone interactive HTML diagrams without external services or build steps. Helps visualize component topology, state transitions, timelines, and quantitative structures.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add plannotator/effective-html --skill html-diagram -a claude-code
Open on GitHub

What html-diagram does

The skill builds self-contained diagrams in a single .html file with inline styles and JavaScript. Depending on the question to answer, it picks a visual model such as a component topology, call sequence, state transition, hierarchy, matrix, or timeline. It renders the structure using HTML and CSS, SVG, Canvas, or WebGL without build steps or external dependencies.

Interactivity stays purposeful. Controls include filtering, path tracing, pan, zoom, or animations that respect prefers-reduced-motion. Notably, this skill never activates on general coding queries by itself. You must invoke it directly or route requests through the broader html skill.

When design-artifact is present in the workspace, the skill checks it to match overall visual composition. Each completed run outputs the absolute file path and key simplifications made along the way.

What it helps with

  • visualize state transitions and conditions in application logic
  • generate an interactive component topology inside a single HTML file
  • illustrate ordered message sequences over time
  • display component hierarchy and ownership without build tools

Example prompts for the agent

  • Use html-diagram to generate an interactive state machine diagram for our checkout flow in a standalone HTML file.
  • Using html-diagram, create a service topology map with filtering and pan controls.
  • Invoke html-diagram to build a sequence diagram showing our authentication handshake.

How to install html-diagram

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/html-diagram/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/html-diagram/

From the same set3

The whole set →
html-plan plannotator Turns project notes and requirements into a self-contained HTML plan. Useful for organizing phases, dependencies, and owners without turning the doc into a dashboard. Claude Code CX Codex Cursor +1 3,800installs html plannotator A skill that makes the agent build one self-contained HTML file with styles and scripts inlined: a report, landing page, deck or calculator. It also knows which sibling skill should take the job instead. Claude Code CX Codex Cursor +1 3,800installs

Similar

telegram-mini-app sickn33 Skill for developing Telegram Mini Apps—web applications that run inside Telegram with a native-like experience. Covers Telegram Web App API, TON ecosystem, user authentication, and monetization through Telegram Stars. Claude Code CX Codex Cursor +1 1,700installs sprites-and-images phaserjs Guides agents on creating Sprite and Image objects in Phaser 4. Explains factory methods, texture frames, mixin components, and visual transforms. Claude Code CX Codex Cursor +1 1,100installs zod-4 prowler-cloud Provides validation patterns for Zod 4 and guides migration from Zod 3. It helps write schemas for forms, API payloads, and adapters. Claude Code CX Codex Cursor +1 1,200installs zustand vercel-labs This skill integrates Zustand into json-render to sync application state. Use it when your project already relies on Zustand and you need to connect it with components rendered by json-render. Claude Code CX Codex Cursor +1 1,900installs tailwind-design-system sickn33 A skill that keeps the agent on Tailwind while you build a design system: tokens, component variants, responsive patterns, accessibility. Useful when the UI drifts. Claude Code CX Codex Cursor +1 1,600installs edge-to-edge Google LLC Migrates Jetpack Compose apps to adaptive edge-to-edge layouts and fixes content blocked by system bars or the keyboard. Claude Code CX Codex Cursor +1 3,200installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about html-diagram

How to install html-diagram in Claude Code?

Run npx skills add plannotator/effective-html --skill html-diagram -a claude-code in your terminal. You can also place the skill file directly at ~/.claude/skills/html-diagram/SKILL.md.

What does html-diagram do?

It designs and generates self-contained interactive diagrams in HTML format without build steps or external dependencies. It automatically chooses the right visual form, including topologies, sequence charts, state diagrams, or matrices.

Does html-diagram require external libraries or a build step?

No, the skill outputs a single self-contained file with inline CSS and JavaScript. The diagram opens directly in the browser without external CDN links or build tools.

Source text

SKILL.md · MIT 
---
name: html-diagram
description: 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.
---

# 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`](../design-artifact/SKILL.md) 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.

© plannotator · MIT · plannotator/effective-html

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor