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

Ready to run

npx skills add https://github.com/ysoftman/myenv --skill html-diagram

💬 Prompt for ChatGPT / Claude Chat▼

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.