skills.rest
ysoftman
ysoftmanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-diagram

Render diagrams as self-contained HTML files with inline SVG and dark theme.

9|Updated Dec 21, 2016
Search Tags:#html#accessibility#offline#diagramming#svg#diagram
One-click install
npx skills add https://github.com/ysoftman/myenv --skill html-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-diagram
Source: https://github.com/ysoftman/myenv/tree/main/.claude/skills/html-diagram
Command: npx skills add https://github.com/ysoftman/myenv --skill html-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables you to create diagram-centric HTML pages that render offline with a consistent dark theme using inline SVG, making diagrams portable and easy to share.

Core Features & Use Cases

  • Render multiple diagram patterns (flow, sequence, timeline, mapping, architecture, state, swimlane, dependency) as a single self-contained HTML file or insert them into an existing HTML doc.
  • Follow a consistent design system with CSS variables, semantic section.diagram sections, and accessible SVG markup that works without client-side JS.
  • Use cases include documenting processes, pipelines, system topology, migration steps, or architecture diagrams for print-ready, offline-ready HTML docs.

Quick Start

Create a diagram section in your document or generate a standalone HTML file using the inline SVG patterns provided.

Frequently Asked Questions about html-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create offline HTML diagrams with inline SVG for documentation?▼

This Skill renders offline HTML diagrams as self-contained files using inline SVG with a dark theme. It supports multiple patterns like flow, sequence, and architecture, ensuring portable documentation without needing client-side JavaScript.

Can I render accessible SVG diagrams in an existing HTML document?▼

Yes, you can insert accessible SVG diagrams into an existing HTML document. The Skill enforces ARIA labeling and section-based semantic markup, ensuring diagrams are accessible and render consistently without external dependencies.

Do I need JavaScript to view HTML files with inline SVG diagrams?▼

No, you do not need JavaScript to view these HTML files with inline SVG diagrams. The Skill produces self-contained markup with CSS variables and semantic sections, ensuring printability and rendering across environments without client-side scripts.

What diagram patterns can I generate using HTML and SVG?▼

You can generate flow, sequence, timeline, mapping, architecture, state, swimlane, and dependency diagram patterns using HTML and SVG. These patterns are rendered with accessible markup and CSS variable tokens for consistent visual styling.

Are these HTML and SVG diagrams printable for offline documentation?▼

Yes, these HTML and SVG diagrams are printable and suitable for offline documentation. The Skill uses CSS variable tokens and semantic section markup to enforce consistent rendering and printability across different environments.

Related Skills

Explore More Design & Creative Skills→
dolsoondolsoon

moai-lang-html-css

Generate semantic HTML5 markup and modular CSS with WCAG 2.1 AA accessibility.

Community
Basic
innV0innV0

HTML Export

Export knowledge models as self-contained HTML reports with embedded JS and CSS.

Official
Intermediate
zaiyemeiyou404zaiyemeiyou404

architecture-diagram

Generate standalone HTML architecture diagrams from SVG data using Python.

Community
Advanced
eykdeykd

htmx-pattern-library

Provide HTMX and Alpine.js patterns for interactive web features.

Community
Advanced