skills.rest
cathrynlavery
cathrynlaveryCOMMUNITY
Explore all skills by this author →
Website𝕏@cathrynlaveryGitHub

diagram-design

Create standalone HTML diagrams with inline SVG and CSS.

3.7k|272|Updated Apr 16, 2026
Search Tags:#technical documentation#diagram generation#architecture mapping#editorial design#inline svg html#brand style guide#product systems visualization
One-click install
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design-cathrynlavery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-design
Source: https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design
Command: npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design-cathrynlavery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you avoid generic, “rounded box” diagrams by producing consistent, brand-matching technical diagrams that look editorial and communicate structure clearly.

Core Features & Use Cases

  • First-run style guide gate: Prevents shipping default (unbranded) styling by prompting you to customize colors and fonts from your website before generating diagrams.
  • 14 diagram types as standalone HTML: Generates self-contained HTML files with inline SVG/CSS (no build steps, no external assets needed) for architecture, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, nested, tree, org chart, layer stack, Venn, and pyramid/funnel.
  • Design system + taste/complexity guardrails: Enforces a shared editorial design system, anti-pattern checks, and a complexity budget (max nodes/arrows, focal accent limits) to reduce “AI slop.”
  • Optional primitives/variants: Supports annotation callouts and a sketchy variant when appropriate.

Quick Start

Generate a diagram by telling the AI to create an Architecture diagram for your system and output it as a standalone HTML file with inline SVG and inline CSS.

Frequently Asked Questions about diagram-design

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

FAQPage Schema
How do I generate architecture diagrams as standalone HTML with inline SVG?▼

Generate technical diagrams as standalone HTML files with inline SVG by defining your system architecture and prompting the AI to output a self-contained file. The process requires no build steps or external assets, embedding all CSS and SVG directly.

What diagram types are supported for product systems visualization and documentation?▼

Supported diagram types for product systems visualization include architecture, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, nested, tree, org chart, layer stack, Venn, and pyramid/funnel grammars.

Can I customize technical diagrams to match my brand style guide?▼

You can customize technical diagrams to match your brand style guide using a first-run style guide gate. This mechanism prompts you to input your website's colors and fonts before generation, preventing unbranded default styling.

What is the best way to avoid generic AI slop in technical documentation diagrams?▼

The best way to avoid generic AI slop in technical documentation diagrams is to enforce a shared editorial design system with anti-pattern checks and a complexity budget. This limits maximum nodes, arrows, and focal accents.

Do I need external assets or build steps to render inline SVG HTML diagrams?▼

You do not need external assets or build steps to render inline SVG HTML diagrams. The generated files are entirely self-contained, embedding all necessary CSS and SVG code directly within the standalone HTML document.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
3

diagram-design-editorial

Generate branded HTML and SVG diagrams with extracted colors and fonts.

Official
Intermediate
JuanMS20JuanMS20

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML files with inline SVG.

Community
Intermediate
jaydubya818jaydubya818

design-system-architect

Create and maintain design systems with tokens, components, and governance.

Community
Advanced
webdevtodayjasonwebdevtodayjason

architecture-diagram

Generate dark-themed SVG architecture diagrams as HTML files using Python.

Community
Intermediate